Remove multiple classes from an Element using JavaScript

avatar

Borislav Hadzhiev

Thu Dec 30 20212 min read

banner

Photo by Anonymous

Remove multiple classes from an Element using JavaScript #

To remove multiple classes from an element, select the element and pass multiple class names to the classList.remove() method, e.g. box.classList.remove('bg-blue', 'text-white'). The remove() method takes one or more classes and removes them from the element.

Here is the HTML for the examples in this article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <style> .bg-blue { background-color: blue; } .text-white { color: white; } </style> </head> <body> <div class="text-white bg-blue" id="box">Box 1</div> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const box = document.getElementById('box'); // โœ… Remove multiple classes from element box.classList.remove('bg-blue', 'text-white'); // โœ… Add multiple classes to element box.classList.add('first-class', 'second-class');

We selected the element using the document.getElementById() method.

Then we used the classList.remove method to remove multiple classes from the element.

If a class is not present on the element, the remove() method does not throw an error, it just ignores the specific class.

If you need to add one or more classes, use the classList.add() method. The method takes one or more class names as parameters and adds them to the element.

If the class is already present in the element's class list, the add() method will not add the class a second time.

The classList.remove() method has to be invoked on a DOM element, so if you have a collection of elements, you have to iterate over it and call the method on each individual node.

Here is the HTML for the next example.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <style> .bg-blue { background-color: blue; } .text-white { color: white; } </style> </head> <body> <div class="text-white bg-blue box">Box 1</div> <div class="text-white bg-blue box">Box 2</div> <div class="text-white bg-blue 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'); for (const box of boxes) { // โœ… Remove multiple classes from element box.classList.remove('bg-blue', 'text-white'); // โœ… Add multiple classes to element box.classList.add('first-class', 'second-class'); }

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

We used the for...of loop to iterate over the collection and removed multiple classes from each element.

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