Skip to main content

How to Add or Remove a Class Only if it Exists in JavaScript

When manipulating an element's classes, you often want to perform an action—like adding or removing a class—without having to first check if that class is already present. A robust script should not throw an error or create duplicate classes if you try to add a class that's already there, or remove one that isn't.

This guide will teach you how to use the modern element.classList property. You will learn that its add() and remove() methods are idempotent by design, meaning they can be called safely without needing any manual checks, making your code cleaner and more reliable.

Core Concept: Idempotent Class Manipulation​

The classList object is designed to be idempotent. This is a fancy term for a simple and powerful idea: an operation can be applied multiple times without changing the result beyond the initial application.

In the context of classList:

  • add('my-class'): If the class does not exist, it is added. If it already exists, the method does nothing. It does not add a duplicate.
  • remove('my-class'): If the class exists, it is removed. If it does not exist, the method does nothing. It does not throw an error.

This behavior is extremely useful because it means you do not need to write if statements to check for a class's existence before you act.

How to Safely Add a Class with classList.add()​

To add a class to an element only if it's not already present, you simply call classList.add().

The problem

  • You want to add the highlight class to a div, but you're not sure if it's already there.

Solution:

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

// This is safe. It will only add the class if it is missing.
box.classList.add('highlight');

// Calling it a second time has no effect.
box.classList.add('highlight'); // No duplicate is created

The add() method can also take multiple arguments to add several classes at once, and it will only add the ones that are missing.

box.classList.add('highlight', 'selected', 'dark-theme');

How to Safely Remove a Class with classList.remove()​

To remove a class from an element only if it's present, you simply call classList.remove().

The problem:

  • You have an element that might have the class is-loading, and you want to ensure it is removed.

Solution:

const content = document.getElementById('content-area');

// This is safe. It will only remove the class if it exists.
content.classList.remove('is-loading');

// Calling it a second time has no effect and does not cause an error.
content.classList.remove('is-loading');

Like add(), remove() can also take multiple arguments to remove several classes at once.

The contains() Method for Explicit Checks​

While the idempotent nature of add() and remove() means you usually don't need to check first, there are times when your script's logic depends on knowing if a class is present. For this, you use the classList.contains() method.

The logic:

  • The .contains() method returns true if the class exists and false if it does not.

Solution:

const button = document.getElementById('my-button');

if (button.classList.contains('is-disabled')) {
  console.log('The button is currently disabled.');
} else {
  console.log('The button is active.');
  // You might add the class here based on some other logic
  button.classList.add('is-disabled');
}

How to Apply to Multiple Elements​

The classList methods work on a single element. If you need to add or remove a class from multiple elements, you must first select them all (e.g., with querySelectorAll) and then iterate over the collection.

The problem:

  • You want to remove the bg-yellow class from all elements with the class box.

Solution:

// 1. Select all the elements
const boxes = document.querySelectorAll('.box');

// 2. Iterate over the collection
boxes.forEach(box => {
  // 3. Call the remove() method on each individual element
  box.classList.remove('bg-yellow');
});
note

This pattern correctly and safely removes the class from every element that has it.

Conclusion​

The modern element.classList API is designed to make class manipulation safe and simple.

  • To add a class only if it's missing, use element.classList.add('class-name').
  • To remove a class only if it's present, use element.classList.remove('class-name').
  • You do not need to check for the class's existence before calling these methods; they are idempotent and will not cause errors or duplicates.
  • If you need to perform a check as part of your script's logic, use the element.classList.contains('class-name') method.

Table of Contents