Skip to main content

How to Remove a Class from Multiple Elements in JavaScript

When building interactive user interfaces, a common task is to change the state of multiple elements at once, such as removing a .highlight or .active class from a list of items. To do this efficiently, you need to select all the relevant elements and then loop through them to apply the change.

This guide will teach you the modern, standard method for removing a CSS class from multiple elements using document.querySelectorAll() and the forEach() method.

The Core Problem: Modifying a Group of Elements​

You have several elements on your page that share a common class, and you need to remove that class from all of them simultaneously, often in response to a user action.

Example of problem: HTML:

<!-- Problem: How to remove the 'highlight' class from all of these divs at once? -->
<div class="box highlight">Box 1</div>
<div class="box">Box 2</div>
<div class="box highlight">Box 3</div>
<div class="box highlight">Box 4</div>

The Solution: querySelectorAll() and forEach()​

The most direct and modern approach is to select all the elements with the target class and then iterate over the resulting collection.

Solution:

// 1. Select all elements that have the '.highlight' class.
const highlightedElements = document.querySelectorAll('.highlight');

// 2. Iterate over the NodeList of elements.
highlightedElements.forEach(element => {
  // 3. For each element, remove the 'highlight' class.
  element.classList.remove('highlight');
});

After this code runs, no elements will have the highlight class. This is the recommended best practice.

You might see older examples using document.getElementsByClassName(). While it also works, querySelectorAll() is generally preferred for this task for a key reason:

  • querySelectorAll(): Returns a static NodeList. Modern NodeList objects have a built-in forEach() method, allowing you to loop over them directly. This is simple and clean.
  • getElementsByClassName(): Returns a live HTMLCollection. HTMLCollection objects do not have a built-in forEach() method. You must first convert them to an array, which adds an extra, unnecessary step.

The More Verbose getElementsByClassName Method​

Look at this example that uses getElementsByClassName():

// This works, but it's less direct.
const elements = document.getElementsByClassName('highlight');

// You must convert the HTMLCollection to an array first.
Array.from(elements).forEach(element => {
  element.classList.remove('highlight');
});
note

For this reason, querySelectorAll() is the more convenient and modern choice.

Removing Multiple Classes at Once​

The element.classList.remove() method can accept multiple arguments, so you can remove several classes from all selected elements in the same loop.

Solution:

const elements = document.querySelectorAll('.highlight, .selected');

elements.forEach(element => {
  // Remove multiple classes from each element in one command.
  element.classList.remove('highlight', 'selected', 'is-active');
});
note

The method will simply ignore any class names that are not present on the element; it will not throw an error.

Practical Example: A "Clear Selection" Button​

This script demonstrates a real-world use case. We have a list of items that the user can select. A "Clear All" button will remove the .selected class from all items at once.

HTML:

<ul>
  <li class="item selected">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item selected">Item 3</li>
  <li class="item selected">Item 4</li>
</ul>
<button id="clear-btn">Clear All</button>

JavaScript:

const clearButton = document.getElementById('clear-btn');

clearButton.addEventListener('click', () => {
  // Find all list items that are currently selected
  const selectedItems = document.querySelectorAll('li.selected');
  
  // Loop through them and remove the 'selected' class
  selectedItems.forEach(item => {
    item.classList.remove('selected');
  });
  
  console.log('All selections cleared!');
});

Conclusion​

Removing a class from multiple elements is a simple and efficient task in modern JavaScript.

  • The recommended best practice is to use document.querySelectorAll() to select the elements, as it returns a NodeList with a built-in forEach() method.
  • Iterate over the NodeList with forEach() and use element.classList.remove() on each element.
  • The classList.remove() method can accept multiple class names as arguments to remove them all at once.

Table of Contents