To remove a class from all HTML DOM elements with JavaScript:
- Get a list of all the elements in the DOM with
document.querySelectorAll('*'). - Iterate over the list with
forEach(). - For each element, call
classList.remove(class)to remove the class from each element.
i.e.:
const allElements = document.querySelectorAll('*');
// const allChildElementsOfParentWithClass = document.querySelectorAll('.class *');
// const allChildElementsOfParentWithId = document.querySelectorAll('#id *');
// const allChildElementsOfParentWithTag = document.querySelectorAll('tag *');
allElements.forEach((element) => {
element.classList.remove('big');
});For example:
<p class="big bold text">Coding</p>
<p class="big bold text">Beauty</p>
<div class="container">
<p class="big bold text">Dev</p>
<button class="big btn">Visit</button>
</div>
<br />
<button id="remove">Remove class</button>.bold {
font-weight: bold;
}
.big {
font-size: 1.5em;
}
.text {
font-family: Arial;
}
.btn {
color: white;
background-color: blue;
}const removeBtn = document.getElementById('remove');
removeBtn.addEventListener('click', () => {
const elements = document.querySelectorAll('*');
elements.forEach((element) => {
element.classList.remove('big');
});
});
This will be the HTML after the button is clicked:
<p class="bold text">Coding</p>
<p class="bold text">Beauty</p>
<div>
<p class="bold text">Dev</p>
<button class="btn">Visit</button>
</div>
<br />
<button id="remove">Remove class</button>
We use the document.querySelectorAll() method to select all DOM elements.
We iterate over the elements in the list object with the forEach() method. This forEach() method works similarly to Array forEach().
classList.remove() method
We use the classList.remove() method to remove a class from the elements. You can remove multiple classes by passing more arguments to remove().
const elements = document.querySelectorAll('*');
elements.forEach((element) => {
element.classList.remove('big', 'bold');
});If any of the classes passed to remove() doesn’t exist on the element, remove() will ignore it, instead of throwing an error.
Remove class from all children elements of element
The previous example works for removing a class from every single element in the DOM. What if you want to remove all elements that are children of a specific DOM element, for instance, just children of the .container element in our example?
To do this, just prefix the * with the element’s selector and separate them with a space. I mean:
// Remove class from all children elements of .container div
const elements = document.querySelectorAll('.container *');
elements.forEach((element) => {
element.classList.remove('big');
});
Add class to all elements
Just like the classList.remove() method removes one or more classes from an element, the classList.add() method adds one or more classes to an element. This means that we can use it in the forEach() method to remove a class from all DOM elements:
const elements = document.querySelectorAll('.canvas *');
elements.forEach((element) => {
element.classList.add('clickable', 'stylable');
});Every Crazy Thing JavaScript Does
A captivating guide to the subtle caveats and lesser-known parts of JavaScript.
