Remove CSS Classes with JavaScript: classList.remove()

You will learn how JavaScript represents an element’s CSS classes, how to remove one or more classes with classList.remove(), and how to select the correct element safely in a real page.

An HTML element can have a class attribute containing one or more class names:

<button class="button active large">Save</button>

Classes are commonly used by CSS to control appearance and by JavaScript to represent UI state. For example, the active class may highlight a selected tab, while hidden may hide a dialog.

In modern JavaScript, an element exposes its classes through the classList property. classList is a collection with methods for changing classes without accidentally changing the others.

To remove a class, call:

element.classList.remove("class-name");

This is safer than replacing the whole className string because it removes only the class you name. If the class is not present, remove() simply does nothing; it does not throw an error.

Think of an element’s classes as name tags attached to a box.

<div class="card featured selected"></div>

The box has three name tags: card, featured, and selected.

Calling this:

card.classList.remove("selected");

removes only the selected tag. The card and featured tags remain attached. This lets CSS immediately apply a different visual style.

Use classList.remove() after selecting an element.

const message = document.querySelector(".message");
message.classList.remove("visible");

• document.querySelector(".message") finds the first element with the message class.
• message.classList accesses that element’s class collection.
• .remove("visible") removes only the visible class.

Given this HTML:

<p class="message visible">Your settings were saved.</p>

After the JavaScript runs, it becomes:

<p class="message">Your settings were saved.</p>

Remove multiple classes

Pass several class names to remove them in one call:

const panel = document.querySelector("#settings-panel");
panel.classList.remove("open", "animated", "highlighted");

Remove a class after a click

<button id="close-notice">Close</button>
<div id="notice" class="notice is-visible">Important update</div>

<script>
  const closeButton = document.querySelector("#close-notice");
  const notice = document.querySelector("#notice");

  closeButton.addEventListener("click", () => {
    notice.classList.remove("is-visible");
  });
</script>

If CSS uses .is-visible to show the notice, removing it changes the notice’s appearance when the user clicks the button.

Consider this page:

<div id="status" class="status online">Connected</div>

<script>
  const status = document.querySelector("#status");
  status.classList.remove("online");
</script>

Execution happens as follows:

1. The browser creates the div element with two classes: status and online.
2. document.querySelector("#status") finds the element whose id is status.
3. The element reference is stored in the status variable.
4. status.classList.remove("online") searches that element’s class list.
5. JavaScript removes online and leaves status unchanged.
6. The resulting element is:

<div id="status" class="status">Connected</div>

Any CSS rule that depends on .online no longer matches this element.

Removing classes is a common way to update a page without rebuilding HTML.

• Close notifications: remove is-visible or add is-hidden when a user dismisses an alert.
• Close modals and menus: remove open from a dialog, dropdown, or mobile navigation.
• Clear selected states: remove selected from a previously selected tab, card, or list item.
• Stop loading states: remove loading once an API request finishes.
• Clear form errors: remove has-error after an input becomes valid.
• End animations: remove an animation-triggering class after a CSS transition or animation completes.

For example, a form can remove an error style after validation succeeds:

const emailInput = document.querySelector("#email");

if (emailInput.value.includes("@")) {
  emailInput.classList.remove("has-error");
}

In production code, class changes are usually tied to a clear state change and are often grouped in event handlers or small UI functions.

Guard against a missing element

querySelector() returns null if nothing matches. Check before using classList when the element may not exist on every page.

const banner = document.querySelector(".cookie-banner");

if (banner) {
  banner.classList.remove("is-visible");
}

Use a named function for a UI action

function closeModal() {
  const modal = document.querySelector("#profile-modal");

  if (!modal) return;

  modal.classList.remove("is-open");
  modal.setAttribute("aria-hidden", "true");
}

The early return prevents errors when #profile-modal is absent. Updating aria-hidden also keeps an accessibility-related attribute aligned with the visual state.

Clear a class from a group of elements

When a page contains several matching elements, use querySelectorAll() and loop through the returned collection.

const tabs = document.querySelectorAll(".tab");

tabs.forEach((tab) => {
  tab.classList.remove("is-active");
});

A typical tab interface first clears is-active from all tabs, then adds it to the tab the user selected.

Using className and deleting every class

This works syntactically, but it removes all existing classes, not just one.

// Avoid when the element needs to keep other classes.
element.className = "";

Use classList.remove() instead:

element.classList.remove("active");

Forgetting the dot in a CSS class selector

When selecting by class, the selector must start with ..

// Incorrect: looks for an <active> HTML element.
document.querySelector("active");

// Correct: looks for class="active".
document.querySelector(".active");

Calling classList on null

This fails if no matching element exists:

const modal = document.querySelector("#missing-modal");
modal.classList.remove("open"); // TypeError

Check that the element was found:

const modal = document.querySelector("#missing-modal");

if (modal) {
  modal.classList.remove("open");
}

Running the script before the element exists

If JavaScript runs before the browser has parsed the target element, the selector may return null.

A simple solution is to place the script near the end of the body:

<div id="notice" class="notice is-visible">Hello</div>
<script src="app.js"></script>

Alternatively, load an external script with defer:

<script src="app.js" defer></script>

Expecting remove() to add a class when it is absent

remove() only removes. To add a class, use add(). To switch between present and absent, use toggle().

classList.remove() is best when you know a class should no longer be present. It is explicit and preserves unrelated classes.

Use toggle() for a repeated action such as opening and closing a menu:

menu.classList.toggle("is-open");

Use className only when you intentionally want to replace the complete set of classes.

// Select one element
const element = document.querySelector("#menu");

// Remove one class
element.classList.remove("is-open");

// Remove several classes
element.classList.remove("is-open", "is-animated");

// Check before removing (usually unnecessary)
if (element.classList.contains("is-open")) {
  element.classList.remove("is-open");
}

// Select all matching elements and remove a class
const items = document.querySelectorAll(".item");
items.forEach((item) => item.classList.remove("selected"));

Rules to remember:

• Pass a class name without . to remove(): use "selected", not ".selected".
• Use . only in querySelector() when selecting by class.
• Removing a class that is not present is safe.
• querySelector() finds the first match; querySelectorAll() finds every match.
• Ensure the element exists before accessing classList when needed.

How do I remove a class from an element in JavaScript?

Select the element and call classList.remove():

document.querySelector("#menu").classList.remove("open");

Does classList.remove() remove all classes?

No. It removes only the class names you provide. All other classes remain on the element.

Do I include a dot before the class name in remove()?

No. Write element.classList.remove("active"), not element.classList.remove(".active").

Can JavaScript remove multiple CSS classes at once?

Yes:

element.classList.remove("active", "highlighted", "loading");

What happens if the class does not exist?

Nothing happens. classList.remove("missing-class") is safe.

Why does Cannot read properties of null appear?

Your selector did not find an element, or the script ran before that element was created. Check the selector and ensure the DOM has loaded.

How do I remove a class from every matching element?

Use querySelectorAll() and loop over the results:

document.querySelectorAll(".card").forEach((card) => {
  card.classList.remove("selected");
});

• DOM selection with querySelector() — finding the element you want to update.
• classList.add() — applying a CSS class to represent a UI state.
• classList.toggle() — switching a class on and off, such as for menus and themes.
• JavaScript event listeners — changing classes in response to clicks, typing, and other user actions.
• CSS selectors — writing rules that target class names such as .is-open.
• DOM manipulation — changing elements, attributes, text, and structure with JavaScript.
• Form validation — adding and removing error classes based on user input.