Skip to main content

How to Check if an Element Does Not Have a Specific Class in JavaScript

A common task in DOM manipulation is to check for the absence of a CSS class before taking an action, such as adding the class, changing styles, or triggering an event. The standard and most reliable way to do this is by using the classList.contains() method.

This guide will teach you how to use element.classList.contains() with the logical NOT (!) operator to correctly check if a class is missing. You will also learn about the related toggle and add methods, which can often simplify your logic.

The Core Method: classList.contains()​

The Element.classList property returns a live DOMTokenList collection of the class attributes of an element. This object has a very useful method, .contains(), which returns true if the specified class exists and false if it does not.

Imagine you have an element and you want to know if it has the class bg-salmon.

This is your HTML code:

<div id="box" class="container bg-salmon">Box</div>

And this your JavaScript code

// Problem: How to check for the presence of a class?
const box = document.getElementById('box');

console.log(box.classList.contains('bg-salmon'));    // Output: true
console.log(box.classList.contains('text-white'));   // Output: false

Solution: Negating the Result with the ! Operator​

To check if an element does not have a class, you simply negate the result of .contains() using the logical NOT (!) operator. This operator flips a boolean value: true becomes false, and false becomes true.

This is the standard and most readable way to check for the absence of a class.

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

// The condition is true if the class is MISSING
if (!box.classList.contains('bg-salmon')) {
  console.log('The element does NOT have the "bg-salmon" class.');
} else {
  console.log('The element already has the "bg-salmon" class.');
}
// Output: The element already has the "bg-salmon" class.

A Practical Alternative: The classList.toggle() Method​

Often, the reason you check if a class is missing is so you can add it. Conversely, you might check if it exists so you can remove it. The classList.toggle() method can handle this entire "if-then-else" logic in a single, clean command.

element.classList.toggle('className') will:

  • Add the class if it is missing (and return true).
  • Remove the class if it exists (and return false).

Instead of writing a full if/else block to add or remove a class, you can just use toggle.

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

// This will remove the 'bg-salmon' class because it already exists.
box.classList.toggle('bg-salmon');
console.log(box.className); // Output: "container"

// This will add the 'bg-salmon' class because it is now missing.
box.classList.toggle('bg-salmon');
console.log(box.className); // Output: "container bg-salmon"
note

This is a highly efficient way to manage state-based classes like active, open, or hidden.

Common Pitfalls and How to Solve Them​

A common mistake is to manually check for a class just to avoid adding it twice.

Problem: Inefficient Code​

// Inefficient: Checking before adding is unnecessary.
if (!box.classList.contains('new-class')) {
  box.classList.add('new-class');
}

Solution: Trust the add() Method​

The classList.add() method is idempotent. This means it will only add a class if it doesn't already exist. If the class is already present, the method does nothing and does not throw an error. This makes the if check completely redundant.

// Efficient: Let the .add() method handle the check internally.
box.classList.add('new-class'); // Safe to call multiple times.

Similarly, classList.remove() will do nothing if the class is not present.

Practical Example: Toggling an "active" State​

This is a classic use case for checking class existence. We have a button that should add or remove an active class on a div each time it is clicked.

HTML:

<button id="myButton">Toggle Active State</button>
<div id="content" class="box">Content</div>

JavaScript:

const button = document.getElementById('myButton');
const content = document.getElementById('content');

button.addEventListener('click', () => {
  // We don't need to check if the class exists first.
  // toggle() handles the logic of adding or removing it for us.
  content.classList.toggle('active');
  
  console.log('Content classes:', content.className);
});
note

This is the most concise and professional way to handle UI state changes based on classes.

Conclusion​

Checking if an element lacks a specific class is a fundamental task, and the classList API provides simple and powerful tools for it.

  • To check if an element does not have a class, use the pattern: if (!element.classList.contains('className')).
  • If your goal is to add a class if it's missing or remove it if it's present, use the element.classList.toggle('className') method for more concise code.
  • Avoid redundant checks like if (!elt.classList.contains(...)) elt.classList.add(...). The .add() and .remove() methods are safe to call even if the class is already present or absent.

Table of Contents