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');

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:
(function (arr) {
	arr.forEach(function (item) {
		if (item.hasOwnProperty('remove')) {
		Object.defineProperty(item, 'remove', {
			configurable: true,
			enumerable: true,
			writable: true,
			value: function remove() {
})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);