How to Remove a Class in JavaScript

Use classList.remove() when JavaScript needs to turn off a visual state, hide a UI block, or reset component styling. This is the cleanest way to reverse reusable CSS behavior without touching inline styles.

What you’ll build or solve

You’ll learn how to remove a class in JavaScript using classList.remove(). You’ll also know how to remove multiple classes and when toggle() is the better option.

When this approach works best

This approach is the right choice when an existing CSS class should no longer apply.

Common real-world scenarios include:

• Closing menus
• Hiding modals
• Clearing error states
• Deactivating tabs
• Exiting dark mode

This is a bad idea when the state should flip on repeated clicks. In that case, toggle() is often cleaner.

Prerequisites

You only need:

• A basic HTML page
• A JavaScript file or <script> tag
• Basic DOM selection knowledge

Step-by-step instructions

Step 1: Select the element and remove the class

Start by selecting the target element.

<div class="banner visible">Welcome</div>

<script>
  const banner = document.querySelector(".banner");
  banner.classList.remove("visible");
</script>

You can remove multiple classes in one call.

banner.classList.remove("visible", "highlight");

This works best when the removed class controls a reusable CSS state.

<style>
  .visible {
    display: block;
  }
</style>

What to look for:

• classList.remove() removes only the target class
• Existing unrelated classes stay intact
• Great for resetting reusable UI states
• Multiple classes can be removed together
• Cleaner than rewriting className

Examples you can copy

Close menu

const menu = document.querySelector(".menu");
menu.classList.remove("open");

Clear error state

const field = document.querySelector(".email");
field.classList.remove("error");

Hide modal

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

Common mistakes and how to fix them

Mistake 1: Overwriting all classes with className

What the reader might do:

banner.className = "";

Why it breaks: every class gets removed, including layout and theme classes.

Corrected approach:

banner.classList.remove("visible");

Mistake 2: Forgetting to select the element first

What the reader might do:

banner.classList.remove("visible");

Why it breaks: banner is undefined if it was never selected.

Corrected approach:

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

Mistake 3: Using remove() when state should toggle

What the reader might do:

menu.classList.remove("open");

Why it breaks: repeated clicks only ever remove the class.

Corrected approach:

menu.classList.toggle("open");

Troubleshooting

If the class does not disappear, confirm the selector matches the HTML.

If styles still remain, verify the removed class is the one controlling the visual state.

If repeated clicks need both open and close behavior, switch to toggle().

If layout styles vanish, stop using className = "".

Quick recap

• Use classList.remove() to remove one class
• Other classes stay intact
• Great for turning off UI states
• Remove multiple classes in one call
• Use toggle() for on/off interactions