JavaScript Remove Class from all Elements
Removing a class from all elements in JavaScript can help you avoid duplicating code or applying styles or behaviors to elements unnecessarily. It is a useful technique for managing the appearance and behavior of a web page or application. So, in this article, we will see how to remove a class from all elements in JavaScript.
Why should we remove class?
- Resetting styles: If we apply the same classname to multiple elements that have a particular style or behavior, we may need to remove that class from all elements to restore them to their default styles or behaviors.
- Improving performance: If we need to make changes to their styles or classes, it is more efficient to remove a class from all elements at once than to selectively update each element individually.
- Changing page state: If you are using JavaScript to manage the state of a page, you might need to remove a class from all elements in order to change the appearance .
Easy way to remove class from all elements
HTML
<p class="Demo">HELLO </p>
<div class="Demo">WELCOME </div>
<span class="Demo">EVERYONE </same>
CSS:
.Demo{
background-color: red;
}
- In this above HTML example code, we have created three different elements in HTML like <p>, <div>, <span> and set the same classname “Demo” to all three elements.
- Then in CSS, we selected the classname ‘Demo’ using CSS class selector and set the red backgrond color.
- See the output, red color background has been set for all the elements.
- Now if we remove the class for all the elements using JS, the background color of all the elements will be removed. There are two ways to remove class using javascript. Here are two common approaches:
Using the querySelectorAll() method
In this method, we select all elements in the DOM using querySelectorAll() method that have the class, and then iterates over the resulting NodeList using the ‘forEach()’ method. For each element in the NodeList, it calls the ‘classList.remove()’ method to remove the class.
const elements = document.querySelectorAll('.Demo');
elements.forEach(el => el.classList.remove('Demo'));
- In this code, we have created the constant ‘elements’ and select all ‘Demo’ classes using document.querySelectorAll() method.
- Then remove the all ‘Demo’ classes using classList.remove() method.
- If we run this code, the red background color is removed
Using the getElementsByClassName() method
In this method we select all elements in the DOM that have the class “Demo”, and then enters a while loop that removes the “Demo” class from the first element in the resulting HTML Collection.
const elements = document.getElementsByClassName('my-class');
while (elements.length > 0) {
elements[0].classList.remove('Demo');
}
In this code:
- We have created the constant ‘elements’ and select all ‘Demo’ classes using document.getElementsByClassName() method.
- Then we create while loop and set the condition length of element is greater than ‘0’. And inside the loop, we removed the ‘Demo’ using classList.remove() method.
- You can also use this method to remove class from all elements.
Conclusion
So, We can remove class from all HTML elements in Javascript using querySelectorAll() method and getElementsByClassName() method