Remove all elements with specific Class using JavaScript

avatar

Borislav Hadzhiev

Sat Jan 01 20222 min read

banner

Photo by Josh Felise

Remove all elements with specific Class using JavaScript #

To remove all elements with a specific class:

  1. Use the document.querySelectorAll() method to select the elements by class.
  2. Use the forEach() method to iterate over the collection.
  3. Call the remove() method on each element to remove it from the DOM.

Here is the HTML for the examples in this article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const boxes = document.querySelectorAll('.box'); boxes.forEach(box => { box.remove(); });

We used the document.querySelectorAll method to select all of the elements with a class of box in the DOM.

The querySelectorAll method return a NodeList, so we are able to use the NodeList.forEach method to iterate over the collection of elements.

If you use the document.getElementsByClassName method, you have to convert the result to an array before calling the forEach() method.

index.js
const boxes = Array.from(document.getElementsByClassName('box')); boxes.forEach(box => { box.remove(); });

Notice that the querySelectorAll method takes a selector as a parameter, so in the call to the method, we prefixed the class name with a dot .box, as opposed to the getElementsByClassName method, which takes the class name as a parameter.

The function we passed to the forEach() method gets called with each element in the collection.

On each iteration, we used the Element.remove() method to remove the element from the DOM.

Note that removing a DOM element also removes all of its children.

If you need to remove the elements with a specific class name without removing their children, use this approach instead.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div class="box"> <span>Child 1</span> </div> <div class="box"> <span>Child 2</span> </div> <div class="box"> <span>Child 3</span> </div> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const boxes = document.querySelectorAll('.box'); boxes.forEach(box => { box.replaceWith(...box.childNodes); });

To remove the element without removing its children, we had to replace the element with its children.

The childNodes property returns a NodeList containing the child elements, text and comments.

Because the replaceWith method takes multiple, comma-separated elements with which to replace the element it was called on, we had to use the spread syntax (...) to unpack the values from the NodeList in the call to the method.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee