jQuery removeClass() Method

What Is removeClass()?

.removeClass() removes one or more CSS class names from each matched element (since jQuery 1.0). Named classes are stripped; others stay. With no arguments, every class is cleared.

$("p").removeClass("blue")
$("p").removeClass("blue under")          // multiple (space)
$("p").removeClass(["blue", "under"])     // array (3.3+)
$("p").eq(1).removeClass()                // remove ALL classes

// Switch state:
$("p").removeClass("old").addClass("new")

How to Use removeClass()

Select elements, pass class names to strip (or none to clear all), then chain if needed.

1. Select the element(s) with a jQuery selector.
2. Call .removeClass("name") — or a space list / array / callback.
3. Omit arguments only when you truly want every class gone.
4. Chain freely — .removeClass() returns the same jQuery object.

Pseudocode

for each matched element:
    if no argument:
        clear entire class attribute
    else:
        names = resolve (string | array | function)
        for each class in names:
            remove it if present

// Official idea:
$("p").even().removeClass("blue")
// even-index paragraphs lose "blue"; other classes stay

Cheat Sheet

Keep these facts handy while stripping classes.

Live Preview

Start from class="blue under highlight", run a remove action, and inspect the updated class attribute.

Sample

class before: "blue under highlight"
$("p").removeClass("blue")
class after:  "under highlight"

jQuery Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

// <p class="blue under">Hello</p>
$("p").removeClass("blue");
console.log($("p").attr("class")); // "under"

under

// <p class="blue under highlight">Hello</p>
$("p").removeClass("blue under");
// same as: $("p").removeClass(["blue", "under"]);
console.log($("p").attr("class")); // "highlight"

highlight

// <p class="blue highlight under">and</p>
$("p").eq(0).removeClass();
console.log($("p").eq(0).attr("class")); // "" (or undefined)

(empty class)

// <li class="beta">Prev</li>
// <li class="alpha beta gamma">Last</li>
$("li").last().removeClass(function () {
  return $(this).prev().attr("class"); // "beta"
});
console.log($("li").last().attr("class")); // "alpha gamma"

alpha gamma

Performance Notes

Class changes are cheap compared with layout thrashing. Prefer named removals over clearing everything when you only need one state gone.

Key Takeaways