Removing a class from a single HTML element is quite easy in JavaScript. You can simply pass the name of the class to be removed from an element to the classList.remove() method and it takes care of the rest.
But what if the same class is present in multiple elements?
Well, in that case, you have to first get the list of those elements which contain the given class and then one by one call the classList.remove() method on each element of the list.
For example, let’s say we have three <p> elements in our HTML document. Each <p> element contains a class 'highlight' which gives it a yellow background.
We want to remove the class ‘highlight’ from each <p> as soon as someone clicks the button:
<button id="myBtn">Remove class</button> <p class="highlight">First Paragraph</p> <p class="highlight">Second Paragraph</p> <p class="highlight">Third Paragraph</p>
Add the 'highlight' class to your stylesheet:
.highlight{
background-color: yellow;
padding: 10px;
}
To remove an existing CSS class from an element, we can use the classList.remove() method.
The classList.remove() method takes the class name to be removed from the element as an argument and removes it from the element.
To remove the given class(‘highlight’ here) from multiple elements, we can first get an array of those elements which contain that class and then run a for loop over the array to remove the class from every element:
// Get references to the elements
const btn = document.getElementById('myBtn');
const elements = document.querySelectorAll('.highlight');
// Fires on button click
btn.addEventListener('click', function () {
for (let i = 0; i < elements.length; i++) {
// Remove class from the current element
elements[i].classList.remove('highlight');
}
});
Output:
In this example, we used the querySelectorAll() method to select the DOM elements that contain the class ‘highlight’.
The querySelectorAll() method allows you to select and return a node list of all elements in the current document that match a specified CSS selector.
In our case, the CSS selector we passed is the '.hightlight' class. Notice that we have passed the class with a dot(.) character.
Use the getElementsByClassName() Method to Remove the Class from Multiple Elements
We can also use the getElementsByClassName() method in place of the querySelectorAll() method to select all the DOM elements that contain a given CSS class.
The getElementsByClassName() method takes a class name as its argument and returns a live HTMLCollection object containing all elements in the current document that have the specified class name.
document.getElementsByClassName(className)
For example, if we want to select all the elements which contain the class ‘highlight’, we can directly pass the class name ‘highlight’ to the getElementsByClassName() method without a dot(.) and it will give us a list of all matching elements.
But if you use the getElementsByClassName() method, you have to first convert the returned value into an Array using the Array.from() method and then run the for loop.
Let’s take the same example again and rewrite the code:
// Get references to the elements
const btn = document.getElementById('myBtn');
let elements = document.getElementsByClassName('highlight');
// Convert HTML collection into an Array
elements = Array.from(elements);
// Fires on button click
btn.addEventListener('click', function () {
for (let i = 0; i < elements.length; i++) {
// Remove the 'highlight' class
elements[i].classList.remove('highlight');
}
});
This will also give you the same result as in the previous example.
Remove Multiple Classes from Multiple Elements
The main advantage of using the classList.remove() method is that it can remove any number of classes from an element at once.
The classList.remove() method can accept any number of arguments, each of which represents a class to be removed from the element.
element.classList.remove(class1, class2, ..., classN);
Let’s take an example, which has three <p> elements each with two classes ‘highlight’ and ‘bold’.
We want to remove both classes from each element as soon as the button is clicked. But don’t want to affect those <p> elements that don’t have these two classes.
<button id="myBtn">Remove classes</button> <p class="highlight bold">First Paragraph</p> <p class="highlight bold">Second Paragraph</p> <p class="highlight bold">Third Paragraph</p> <p class="green">Fourth Paragraph</p>
Add the classes to your stylesheet:
.highlight{
background-color: yellow;
padding: 10px;
}
.bold{
font-weight: bold;
}
.green{
background-color: springgreen;
padding: 10px;
}
But how would you select those elements which have both classes ‘highlight’ and ‘bold’?
To select all the elements which have both classes ‘highlight’ and ‘bold’, you can concatenate these two class names with a dot(.) and then pass the resulting string to the querySelectorAll() method as an argument.
// Get references to the elements
const btn = document.getElementById('myBtn');
const elements = document.querySelectorAll('.highlight.bold');
// Fires on button click
btn.addEventListener('click', function(){
for(let i = 0;i<elements.length;i++){
// Remove the 'highlight' and 'bold' classes
elements[i].classList.remove('highlight', 'bold');
}
});
Output:
Conclusion
In this article, we learned how we can remove a class from multiple elements with JavaScript.
In summary, you can use the classList.remove() method in combination with the querySelectorAll() method to remove a class from single or multiple elements.
The classList.remove() method can take any number of parameters which are the class names to be removed from the element.
If you want to remove multiple classes from multiple elements, you can concatenate all the class names with a dot(.) character and then pass the resulting string to the querySelectorAll() method to get the list of all the matching elements.
Thanks for reading.
