Add/Remove class if it exists on Element in JavaScript

# Table of Contents

# Remove class if it exists on Element using JavaScript

To remove a class if it exists on an element, select the element and pass the class name to the classList.remove() method, e.g. box.classList.remove('bg-yellow').

The remove() method will ignore any of the supplied classes if they aren't present on the element.

Here is the HTML for the examples.

index.html

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

    <style>
      .bg-yellow {
        background-color: yellow;
      }
    </style>
  </head>

  <body>
    <div id="box" class="bg-yellow">Box 1</div>

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

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

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

box.classList.remove('bg-yellow');

remove class if it exists on element

The code for this article is available on GitHub

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

We used the classList.remove() method to remove a class if it exists on the element.

If the class is not present on the element, the remove method doesn't throw an error, it just ignores the request to remove the specific class.

You can test this by duplicating the line that removes the class from the element.

index.js

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

box.classList.remove('bg-yellow');

// 👇️ has no effect because the class was already removed
box.classList.remove('bg-yellow');

You can use the remove() method to remove as many classes as necessary in a single call.

If any of the classes are not present on the element, they will be ignored.

index.js

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

box.classList.remove(
  'bg-yellow',
  'second-class',
  'third-class'
);

Similarly, if you need to add a class to an element if it isn't already present, you can use the classList.add() method.

index.js

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

box.classList.remove(
  'bg-yellow',
  'second-class',
  'third-class'
);

box.classList.add(
  'first-class',
  'second-class'
);

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.

# Removing a class if it exists from a collection of elements

Note that the classList.remove() method has to be called on a DOM element.

If you have a collection of elements you need to remove a class from, you have to iterate over the collection and call the method on each node.

Here is the HTML for the next example.

index.html

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

    <style>
      .bg-yellow {
        background-color: yellow;
      }
    </style>
  </head>

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

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

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

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

for (const box of boxes) {
  box.classList.remove(
    'bg-yellow',
    'second-class',
    'third-class'
  );
}

remove class if it exists from collection of elements

The code for this article is available on GitHub

We used the document.querySelectorAll() method to select all of the DOM elements that have a class of box.

To iterate over the elements, we use the for...of loop and remove a class from each element in the collection.

# Add a class if it doesn't exist on Element using JavaScript

To add a class if it doesn't already exist on an element, select the element and pass the class name to the classList.add() method.

The add() method will omit any classes that are already present on the element.

Here is the HTML for the examples.

index.html

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

    <style>
      .bg-yellow {
        background-color: yellow;
      }
    </style>
  </head>

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

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

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

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

box.classList.add('bg-yellow');

add class if it does not exist on element

The code for this article is available on GitHub

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

We used the classList.add() method to add a class if it doesn't already exist 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 test this by duplicating the line that adds the class and inspecting the element.

index.js

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

box.classList.add('bg-yellow');

// 👇️ has no effect because the class already exists
box.classList.add('bg-yellow');

You can use the add() method to add as many classes as necessary to the element and only the classes that are not already present on the Node will get added.

index.js

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

box.classList.add(
  'bg-yellow',
  'second-class',
  'third-class'
);

Similarly, if you need to remove a class only if it exists on the element, you can use the classList.remove() method.

index.js

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

box.classList.add(
  'bg-yellow',
  'second-class',
  'third-class'
);

box.classList.remove(
  'second-class',
  'third-class',
  'example'
);

If the provided class does not exist on the element, the remove() method does not throw an error, instead, it simply ignores the class.

# Adding a class if it doesn't exist to a collection of elements

Note that the classList.add() method has to be called on a DOM element, so if you have a collection of elements you need to add a class to, you have to iterate over the collection and call the method on each node.

Here is the HTML for the next example.

index.html

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

    <style>
      .bg-yellow {
        background-color: yellow;
      }
    </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>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

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

for (const box of boxes) {
  box.classList.add('bg-yellow', 'second-class', 'third-class');

  box.classList.remove('second-class', 'third-class', 'example');
}

add class if it does not exist on collection of elements

The code for this article is available on GitHub

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

To iterate over the elements, we use the for...of loop and added a class to each element in the collection.

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 class if it exists on Element in JavaScript

# Table of Contents

# Remove class if it exists on Element using JavaScript

# Removing a class if it exists from a collection of elements

# Add a class if it doesn't exist on Element using JavaScript

# Adding a class if it doesn't exist to a collection of elements

Borislav Hadzhiev