Skip to main content Accessibility Feedback

Removing an element from the DOM, the ES6 way

Earlier this year, I shared a way to remove elements from the DOM using the removeChild() method.

ES6 provides an easier, simpler way to achieve the same tax: remove(). Call the remove() method on the element you want to remove.

var elem = document.querySelector('#some-element');
elem.remove();

Browser Compatibility #

The remove() method works in all modern browsers, but not IE. You can add support back to IE9 with a polyfill.

Personally, I use the older approach because it has better backwards compatibility and doesn’t need a polyfill, but the remove() method is quite nice.

/**
 * ChildNode.remove() polyfill
 */
// from:https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/remove()/remove().md
(function (arr) {
    arr.forEach(function (item) {
        if (item.hasOwnProperty('remove')) {
            return;
        }
        Object.defineProperty(item, 'remove', {
            configurable: true,
            enumerable: true,
            writable: true,
            value: function remove() {
                this.parentNode.removeChild(this);
            }
        });
    });
})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);

🚀 Make 2018 the year you master JavaScript! My pocket guides and mini courses are short, focused, and made for beginners. You can do this!

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips