Add/Remove multiple classes to an Element in JavaScript

Table of Contents #

Add multiple classes to an Element using JavaScript #

To add multiple classes to an element, select the element and pass multiple classes to the classList.add() method.

The add() method takes one or more classes and adds them to the element.

Here is the HTML for the examples in this article.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>

    <style>
      .bg-blue {
        background-color: blue;
      }

      .text-white {
        color: white;
      }
    </style>
  </head>

  <body>
    <div id="box">Box 1</div>

    <script src="index.js"></script>
  </body>
</html>

And here is the related JavaScript code.

index.js

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

// ✅ Add multiple classes
box.classList.add('bg-blue', 'text-white');

// ✅ Remove multiple classes
box.classList.remove('first-class', 'second-class');

add multiple classes to element

We selected the element using the document.getElementById() method.

We then used the classList.add method to add multiple classes to the element.

If a class is already present on the element, it will be omitted. The add() method only adds classes that are not already contained in the element's class list.

You can pass one or more classes to the add() method, but if you pass it an empty string argument or an argument that contains a space, the method throws an error.

If you need to remove one or more classes from an element, use the classList.remove() method. The method takes one or more class names as parameters and removes them from the element.

The classList.add() method has to be invoked on a DOM element. If you have a collection of elements, iterate over it and call the method on each element.

Here is the HTML for the next example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      .bg-blue {
        background-color: blue;
      }

      .text-white {
        color: white;
      }
    </style>
  </head>

  <body>
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>

    <script src="index.js"></script>
  </body>
</html>

And here is the related JavaScript code.

index.js

Copied!
const boxes = document.querySelectorAll('.box');

for (const box of boxes) {
  // ✅ Add multiple classes
  box.classList.add('bg-blue', 'text-white');

  // ✅ Remove multiple classes
  box.classList.remove('first-class', 'second-class');
}

add multiple classes to collection of elements

We used the document.querySelectorAll method to select all of the elements in the DOM with a class of box.

We used the for...of loop to iterate over the collection and added multiple classes to each element.

Remove multiple classes from an Element using JavaScript #

To remove multiple classes from an element, select the element and pass multiple class names to the classList.remove() method.

The remove() method takes one or more classes and removes them from the element.

Here is the HTML for the examples in this article.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>

    <style>
      .bg-blue {
        background-color: blue;
      }

      .text-white {
        color: white;
      }
    </style>
  </head>

  <body>
    <div class="text-white bg-blue" id="box">Box 1</div>

    <script src="index.js"></script>
  </body>
</html>

And here is the related JavaScript code.

index.js

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

// ✅ Remove multiple classes from element
box.classList.remove('bg-blue', 'text-white');

// ✅ Add multiple classes to element
box.classList.add('first-class', 'second-class');

We selected the element using the document.getElementById() method.

Then we used the classList.remove method to remove multiple classes from the element.

If a class is not present on the element, the remove() method does not throw an error, it just ignores the specific class.

If you need to add one or more classes, use the classList.add() method. The method takes one or more class names as parameters and adds them to the element.

If the class is already present in the element's class list, the add() method will not add the class a second time.

The classList.remove() method has to be invoked on a DOM element, so if you have a collection of elements, you have to iterate over it and call the method on each individual node.

Here is the HTML for the next example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      .bg-blue {
        background-color: blue;
      }

      .text-white {
        color: white;
      }
    </style>
  </head>

  <body>
    <div class="text-white bg-blue box">Box 1</div>
    <div class="text-white bg-blue box">Box 2</div>
    <div class="text-white bg-blue box">Box 3</div>

    <script src="index.js"></script>
  </body>
</html>

And here is the related JavaScript code.

index.js

Copied!
const boxes = document.querySelectorAll('.box');

for (const box of boxes) {
  // ✅ Remove multiple classes from element
  box.classList.remove('bg-blue', 'text-white');

  // ✅ Add multiple classes to element
  box.classList.add('first-class', 'second-class');
}

We used the document.querySelectorAll method to select all of the elements in the DOM with a class of box.

We used the for...of loop to iterate over the collection and removed multiple classes from each element.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Add/Remove multiple classes to an Element in JavaScript

Table of Contents #

Add multiple classes to an Element using JavaScript #

Remove multiple classes from an Element using JavaScript #

Borislav Hadzhiev