Remove class if it exists on Element using JavaScript

avatar

Borislav Hadzhiev

Last updated: Dec 30, 2021

banner

Check out my new book

Remove class if it exists on Element using JavaScript #

To remove a class if it exists on an element, select the element and pass the class name to the classList.remove() method, e.g. box.classList.remove('bg-yellow'). The remove() method will ignore any of the supplied classes if they aren't present on 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-yellow { background-color: yellow; } </style> </head> <body> <div id="box" class="bg-yellow">Box 1</div> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const box = document.getElementById('box'); box.classList.remove('bg-yellow');

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

We used the classList.remove method to remove a class if it exists on the element.

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

You can test this by duplicating the line that removes the class from the element.

index.js
const box = document.getElementById('box'); box.classList.remove('bg-yellow'); // 👇️ has no effect because the class was already removed box.classList.remove('bg-yellow');

You can use the remove() method to remove as many classes as necessary in a single call.

If any of the classes are not present on the element, they will be ignored.

index.js
const box = document.getElementById('box'); box.classList.remove( 'bg-yellow', 'second-class', 'third-class' );

Similarly, if you need to add a class to an element if it isn't already present, you can use the classList.add() method.

index.js
const box = document.getElementById('box'); box.classList.remove( 'bg-yellow', 'second-class', 'third-class' ); box.classList.add( 'first-class', 'second-class' );
If a class is already present on the element, it will be omitted. The add() method only adds classes that are not already contained in the element's class list.

Note that the classList.remove() method has to be called on a DOM element. If you have a collection of elements you need to remove a class from, you have to iterate over the collection and call the method on each node.

Here is the HTML for the next example.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <style> .bg-yellow { background-color: yellow; } </style> </head> <body> <div class="box bg-yellow">Box 1</div> <div class="box bg-yellow">Box 2</div> <div class="box bg-yellow">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) { box.classList.remove( 'bg-yellow', 'second-class', 'third-class' ); }

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

To iterate over the elements, we use the for...of loop and removed a class from each element in the collection.

Use the search field on my Home Page to filter through my more than 3,000 articles.