How to Remove a Class From All Elements in JavaScript

Tari Ibaba
Last updated on January 18, 2023
How to Remove a Class From All Elements in JavaScript

To remove a class from all HTML DOM elements with JavaScript:

  1. Get a list of all the elements in the DOM with document.querySelectorAll('*').
  2. Iterate over the list with forEach().
  3. 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>
The classes are removed from the element when the button is clicked.
The classes are removed from the element when the button is clicked.

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');
});
Coding Beauty Assistant logo

Try Coding Beauty AI Assistant for VS Code

Meet the new intelligent assistant: tailored to optimize your work efficiency with lightning-fast code completions, intuitive AI chat + web search, reliable human expert help, and more.

See also