You are currently viewing 2 Easy Way to Remove Class from All Element using JavaScript

2 Easy Way to Remove Class from All Element using JavaScript

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. javascript remove class from all 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:
READ ALSO  3 Simple Ways to Set the Default Value if Undefined in JavaScript

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

Leave a Reply