Check if an Element does NOT have a specific Class using JS

# Check if an Element does NOT have a specific Class using JS

Use the classList.contains() method to check if an element does not have a specific class.

If the element does not have the provided class, the method returns false, otherwise true is returned.

Here is the HTML for the example.

index.html

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

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

  <body>
    <div id="box" class="bg-salmon">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');

if (!box.classList.contains('bg-salmon')) {
  console.log('Element does NOT have class');
} else {
  console.log('Element has class');
}

check if element does not have specific class

The code for this article is available on GitHub

We used the classList.contains() method to check if the element does not have a class name.

The contains() method returns true if the element has the provided class and false otherwise.

index.js

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

// 👇️ true
console.log(box.classList.contains('bg-salmon'));

// 👇️ false
console.log(box.classList.contains('does-not-exist'));

using contains method

We used the logical NOT (!) operator to negate the result returned from the contains() method.

When used with boolean values, like in the example, the operator flips the value, e.g. true becomes false and vice versa.

index.js

Copied!
console.log(!true); // 👉️ false
console.log(!false); // 👉️ true

If the element doesn't contain the bg-salmon class, our if block runs, otherwise, the else block runs.

index.js

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

if (!box.classList.contains('bg-salmon')) {
  console.log('Element does NOT have class');
} else {
  console.log('Element has class');
}

Note that if you are checking if a certain class is not present because you don't want to add it twice, you can use the classList.add() method to avoid this scenario.

index.js

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

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

// ✅ Remove classes from the element
box.classList.remove('third-class', 'fourth-class');

The code for this article is available on GitHub

The classList.add() method adds one or more classes to an element. If any of the provided classes already exist on the element, the class is omitted.

The classList.remove() method removes one or more classes from the element. If the class does not exist on the element, the method ignores the class and does not throw an error.

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.

Check if an Element does NOT have a specific Class using JS

# Check if an Element does NOT have a specific Class using JS

Borislav Hadzhiev