Remove a class from multiple elements using JavaScript

# Remove a class from multiple elements using JavaScript

To remove a class from multiple elements:

Use the document.querySelectorAll method to select the elements.
Use the forEach() method to iterate over the collection.
Use the classList.remove() method to remove the class from each element.

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 big">Box 1</div>
    <div class="box big">Box 2</div>
    <div class="box big">Box 3</div>

    <script src="index.js"></script>
  </body>
</html>

And here is the related JavaScript code.

index.js

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

boxes.forEach(box => {
  // ✅ Remove class from each element
  box.classList.remove('big');

  // ✅ Add class to each element
  // box.classList.add('small');
});

remove class from multiple elements

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

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

index.js

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

boxes.forEach(box => {
  // ✅ Remove class from each element
  box.classList.remove('big');

  // ✅ Add class to each element
  // box.classList.add('small');
});

The function we passed to the forEach method gets called with each element in the array.

On each iteration, we use the classList.remove() method to remove a class from the element.

# Remove multiple classes from multiple elements

Note that you can pass as many classes as necessary to the classList.remove() method.

index.js

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

boxes.forEach(box => {
  // ✅ Remove class from each element
  box.classList.remove('big', 'medium', 'large');
});

remove multiple classes from multiple elements

The remove() method ignores any class names that are not present on the element. It doesn't throw an error.

# Add class to multiple elements

If you need to add a class to each element in the collection, use the classList.add() method.

index.js

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

boxes.forEach(box => {
  // ✅ Remove class from each element
  box.classList.remove('big');

  // ✅ Add class to each element
  box.classList.add('small');
});

add class to multiple elements

# Remove a class from multiple elements with different selectors

If the elements you are removing a class from have different identifiers, e.g. class names, ids, etc, you can pass multiple comma-separated selectors to the querySelectorAll method.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div class="box1 big">Box 1</div>
    <div class="box2 big">Box 2</div>
    <div class="box3 big">Box 3</div>

    <script src="index.js"></script>
  </body>
</html>

And here is the related JavaScript code.

index.js

Copied!
const boxes = document.querySelectorAll('.box1, .box2, .box3');

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

remove class from multiple elements with different selectors

We selected the elements with classes box1, box2 and box3 and removed a class from each element in the collection.

You can pass as many comma-separated selectors as necessary to the document.querySelectorAll method.

I've also written an article on how to add a class to multiple elements.

# 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 a class from multiple elements using JavaScript