Skip to main content Accessibility Feedback

Converting the jQuery remove() method to vanilla JS

I have an ongoing series on converting jQuery methods and plugins to vanilla JS.

Today, we’re going to look at the jQuery remove() method, and how to convert it to vanilla JS. Let’s dig in!

The jQuery remove() method

jQuery’s remove() method removes all elements in a set from the DOM.

Let’s say you have a collection of buttons, like this.

<p>
	<button id="save">Save</button>
	<button id="edit">Edit</button>
	<button id="cancel">Cancel</button>
</p>

You could remove the #edit button like this.

$('#edit').remove();

Your HTML would look like this afterwards.

<p>
	<button id="save">Save</button>
	<button id="cancel">Cancel</button>
</p>

Or, you could remove all buttons from the UI like this.

$('button').remove();

Afterwards, your HTML would look like this.

<p></p>

How to remove elements from the UI with vanilla JS

This used to be a just a little more complicated, but today, the vanilla JS Element.remove() method gives you the same functionality as jQuery’s remove() method.

To use it, you get the element you want to remove (using querySelector() or some other selector method), then call the remove() method on it.

You could remove the #edit button like this.

document.querySelector('#edit').remove();

Your HTML would look like this afterwards.

<p>
	<button id="save">Save</button>
	<button id="cancel">Cancel</button>
</p>

Unlike jQuery, you cannot call the vanilla JS remove() method on a collection of elements.

But you can loop through them and call it on each element. To, for example, remove all buttons from the DOM, you would do this.

Array.from(document.querySelectorAll('button')).forEach(function (button) {
	button.remove();
});

This uses querySelectorAll() to get a NodeList of matching elements. Then, it converts the NodeList to an array with the Array.from() method.

This allows us to use the Array.forEach() method to loop through each item.

Browser compatibility

The remove() method works in all modern browsers, but requires a polyfill for IE. The Array.from() method also requires a polyfill.

Alternatively, you can use the Element.removeChild() method and the Array.prototype.slice.call() hack, respectively.