How to Remove a CSS Class with jQuery

This guide covers how to remove a CSS class from an HTML element using jQuery. It explains the core .removeClass() method, outlines its syntax, and provides practical code examples for removing a single class, multiple classes, or all classes simultaneously.

The .removeClass() Method

In jQuery, the built-in method used to remove one or more CSS classes from selected elements is .removeClass(). It alters the class attribute of the matched elements in the DOM without affecting any other styles or attributes.

Syntax

$(selector).removeClass(className);

• className (optional): One or more space-separated class names to be removed. If this parameter is omitted, all classes will be removed from the selected elements.

1. Removing a Single Class

To remove a specific class from an element, pass the class name as a string to .removeClass() without the leading period.

<p class="intro highlight">This is a paragraph.</p>

<script>
  // Removes only the "highlight" class
  $("p").removeClass("highlight");
</script>

Result:

<p class="intro">This is a paragraph.</p>

2. Removing Multiple Classes

To remove more than one class at a time, specify the class names separated by a space inside the string argument.

<div class="card active border-primary shadow">Card content</div>

<script>
  // Removes both "active" and "shadow" classes
  $(".card").removeClass("active shadow");
</script>

Result:

<div class="card border-primary">Card content</div>

3. Removing All Classes

Calling the .removeClass() method without any arguments removes every class currently applied to the target element.

<button class="btn btn-primary active disabled">Click Me</button>

<script>
  // Removes all classes
  $("button").removeClass();
</script>

Result:

<button class="">Click Me</button>

4. Removing Classes Using a Function

The .removeClass() method can also accept a callback function. This function returns the name of the class (or classes) to be removed based on the element's index and its existing class attribute.

$("li").removeClass(function(index, currentClass) {
  // Conditionally remove classes
  if (currentClass.includes("temp-")) {
    return "temp-item";
  }
});

Using .removeClass() provides a simple, cross-browser way to manipulate element styling dynamically via JavaScript.