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.:

JavaScriptCopied!

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:

HTMLCopied!

<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>

CSSCopied!

.bold {
  font-weight: bold;
}

.big {
  font-size: 1.5em;
}

.text {
  font-family: Arial;
}

.btn {
  color: white;
  background-color: blue;
}

JavaScriptCopied!

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:

HTMLCopied!

<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().

JavaScriptCopied!

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:

JavaScriptCopied!

// 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:

JavaScriptCopied!

const elements = document.querySelectorAll('.canvas *');

elements.forEach((element) => {
  element.classList.add('clickable', 'stylable');
});

11 Amazing New JavaScript Features in ES13

This guide will bring you up to speed with all the latest features added in ECMAScript 13. These powerful new features will modernize your JavaScript with shorter and more expressive code.