Remove all elements with specific Class using JavaScript

# Remove all elements with specific Class using JavaScript

To remove all elements with a specific class:

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

Here is the HTML for the examples.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>
  </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>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const boxes = document.querySelectorAll('.box');

boxes.forEach(box => {
  box.remove();
});

remove all elements with specific class

The code for this article is available on GitHub

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

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

# getElementsByClassName vs querySelectorAll

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

index.js

Copied!
const boxes = Array.from(document.getElementsByClassName('box'));

boxes.forEach(box => {
  box.remove();
});

The code for this article is available on GitHub

Notice that the querySelectorAll() method takes a selector as a parameter. In the call to the method, we prefixed the class name with a dot .box.

index.js

Copied!
const boxes = document.querySelectorAll('.box');

boxes.forEach(box => {
  box.remove();
});

Whereas the getElementsByClassName() method 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.

# Remove all elements with specific class without removing their children

If you need to remove the elements with a specific class name without removing their children, use the replaceWith() method.

index.html

Copied!
<!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>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const boxes = document.querySelectorAll('.box');

boxes.forEach(box => {
  box.replaceWith(...box.childNodes);
});

remove elements with class without removing children

The code for this article is available on GitHub

To remove an 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.

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

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Remove all elements with specific Class using JavaScript