Skip to main content

How to Add or Remove Multiple Classes from an Element in JavaScript

When manipulating the DOM, you often need to add or remove several CSS classes at once to apply a combination of styles to an element. Instead of calling classList.add() or classList.remove() multiple times, you can perform these operations in a single, efficient command.

This guide will teach you how to use the modern element.classList property to add and remove multiple classes in one go. You will learn the simple syntax for this and how to apply it to both a single element and a collection of elements.

Core Tool: element.classList​

The classList property is a modern and powerful interface for managing an element's classes. It provides several methods, and the ones we're interested in, add() and remove(), are designed to accept multiple arguments.

How to Add Multiple Classes at Once​

To add several classes to a single element, you simply pass each class name as a separate, comma-separated argument to the classList.add() method.

The logic:

  • The add() method will iterate through all the arguments you provide and add each one to the element's class list. This operation is idempotent: if any of the classes already exist on the element, they will not be added a second time.

Solution:

const box = document.getElementById('box');

// Add three separate classes to the element in a single command
box.classList.add('bg-blue', 'text-white', 'p-4');

// The element's class attribute is now "bg-blue text-white p-4"
note

This is far cleaner and more efficient than calling add() three times.

How to Remove Multiple Classes at Once​

The classList.remove() method works in exactly the same way. You can pass it multiple class names as arguments to remove them all in a single call.

The logic:

  • The remove() method will iterate through all the arguments and remove each class from the element's class list. This operation is also safe: if any of the specified classes are not present on the element, the method simply ignores them and does not throw an error.

Solution:

const box = document.getElementById('box');

// Assuming the element starts with class="bg-blue text-white p-4"
box.classList.remove('bg-blue', 'p-4');

// The element's class attribute is now just "text-white"

How to Apply to a Collection of Elements​

The classList methods only work on a single element. If you need to add or remove multiple classes from a group of elements, you must first select them all and then loop through the collection.

The problem:

  • You want to add class1 and class2 to every element with the class item.

Solution:

// 1. Select all the elements
const items = document.querySelectorAll('.item');

// 2. Iterate over the collection with forEach
items.forEach(item => {
  // 3. Call the add() method with multiple arguments on each element
  item.classList.add('class1', 'class2');
});

Practical Example: A "Card State" Toggler​

This script has two buttons that add or remove a set of classes to change a card's appearance from a "warning" state to a "success" state.

The HTML and CSS:

<style>
  .card { border: 1px solid #ccc; padding: 16px; }
  .card.is-success { background-color: lightgreen; border-color: green; }
  .card.is-warning { background-color: lightyellow; border-color: orange; }
  .card.text-bold { font-weight: bold; }
</style>

<div id="status-card" class="card">This is a status message.</div>
<button id="btn-success">Set Success State</button>
<button id="btn-warning">Set Warning State</button>

The JavaScript:

const card = document.getElementById('status-card');
const successBtn = document.getElementById('btn-success');
const warningBtn = document.getElementById('btn-warning');

successBtn.addEventListener('click', () => {
  // Remove the warning state classes and add the success state classes
  card.classList.remove('is-warning');
  card.classList.add('is-success', 'text-bold');
});

warningBtn.addEventListener('click', () => {
  // Do the opposite
  card.classList.remove('is-success', 'text-bold');
  card.classList.add('is-warning');
});

Conclusion​

The element.classList property is the definitive tool for managing an element's classes in modern JavaScript.

  • To add multiple classes, pass them as separate arguments to classList.add('class1', 'class2', ...).
  • To remove multiple classes, do the same with classList.remove('class1', 'class2', ...).
  • Both methods are safe and idempotent, meaning they won't cause errors or duplicates if a class is already present or missing.
  • To apply these methods to a group of elements, you must first select the collection (e.g., with querySelectorAll) and then loop through it.

Table of Contents