Remove a class from multiple elements using JavaScript

avatar
Borislav Hadzhiev

2 min

banner

# Remove a class from multiple elements using JavaScript

To remove a class from multiple elements:

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

Here is the HTML for the examples.

index.html
<!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
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'); });

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
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
const boxes = Array.from(document.getElementsByClassName('box')); boxes.forEach(box => { // ✅ Remove class from each element box.classList.remove('big', 'medium', 'large'); });
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
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'); });

# 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
<!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
const boxes = document.querySelectorAll('.box1, .box2, .box3'); boxes.forEach(box => { box.classList.remove('big'); });

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.
book cover
You can use the search field on my Home Page to filter through all of my articles.