jQuery .removeClass() Method

What You’ll Learn

The .removeClass() method strips one or more CSS class names from each matched element — call it with no arguments to remove every class. This tutorial covers all four API overloads (no-args, string, array, callback), comparisons with .addClass(), .toggleClass(), and .css(), and the official swap pattern with .addClass().

Introduction

Styling in modern web pages usually lives in CSS files — reusable class names like .active, .error, or .hidden that you toggle on elements at runtime. When JavaScript needs to turn a style off, jQuery provides .removeClass().

Available since jQuery 1.0, .removeClass() updates the class attribute on each matched element. It strips specified class names while leaving others intact — or removes every class when called with no arguments. It is often paired with .addClass() to switch states. For inline property values, use .css() instead.

Understanding the .removeClass() Method

Given a jQuery object representing one or more DOM elements, .removeClass() removes the specified class name(s) from each element’s class attribute. Styles defined in your stylesheet for those classes stop applying immediately — no need to clear individual CSS properties in JavaScript.

Think of classes as labels you stick onto elements. .addClass() adds more labels; .removeClass() peels them off; .toggleClass() flips a label on or off. To replace every class at once, set the attribute directly: .attr("class", "newClass").

📝 Syntax

jQuery .removeClass() accepts four argument forms:

1. No arguments — remove all classes (since 1.0)

.removeClass()

• Removes every class from each matched element. On some older browsers, removing the last class may leave an empty string on the attribute.

2. String — one or more class names (since 1.0)

.removeClass( className )

• className — a string of one or more space-separated CSS class names to remove from each matched element.

3. Array — list of class names (since 3.3)

.removeClass( [ classNames ] )

• classNames — an array of strings; jQuery removes every entry from each element.

4. Function — per-element class name(s) (since 1.4)

.removeClass( function( index, className ) {
  // return className string
} )

• index — zero-based index of the element within the matched set.
• className — the element’s current class attribute value (or empty string).
• Return a string of class name(s) to remove for that element.

5. Function returning array (since 3.3)

The callback may return an array of class names instead of a space-separated string:

$( "li" ).removeClass( function( index ) {
  return [ "item-" + index, "row-" + index ];
} );

Return value

• The original jQuery object (for chaining) — not a new collection.

Official jQuery API swap pattern

$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );

// Strip old classes, then append the new one — common state-switch pattern

Examples Gallery

Examples 1–4 follow the official jQuery API documentation. Example 5 shows removing every class with no arguments. Use DevTools or the Try-it links to run each snippet in the browser.

$( "p" ).even().removeClass( "blue" );

Even paragraphs (0, 2, 4…) → class "blue" removed

Odd paragraphs → still blue

Other classes on even paragraphs → unchanged

$( "p" ).odd().removeClass( "blue under" );

Odd paragraphs → classes "blue" and "under" removed

Even paragraphs → still styled with blue and underline

Remaining classes on odd paragraphs → preserved

$( "p" ).odd().removeClass( [ "blue", "under" ] );

Same visual result as Example 2 — both classes removed from odd paragraphs

Useful when class names come from a variable or API response

$( "li" ).last().removeClass( function() {
  return $( this ).prev().attr( "class" );
} );

Last li → classes matching previous sibling's class attribute removed

Previous li → unchanged

Demonstrates dynamic class removal via callback return value

$( "p" ).eq( 1 ).removeClass();

Second paragraph (index 1) → all classes removed

class attribute → empty (or empty string on older browsers)

Other paragraphs → unchanged

🚀 Common Use Cases

• Tab or nav switch — $(".tab").removeClass("active"); $(this).addClass("active").
• Clear validation errors — $("input").removeClass("error") after the user fixes a field.
• Reset styling state — $(".panel").removeClass("visible hidden") before applying a new state.
• Official swap pattern — $("p").removeClass("myClass noClass").addClass("yourClass").
• Wipe all classes — $("div").removeClass() when you need a clean slate (use sparingly).
• Replace every class — $(this).attr("class", "newState") when you want one class only, not a chain.

📝 Notes

• Available since jQuery 1.0 — core class manipulation API.
• Often paired with .addClass() to switch classes — e.g. the official .removeClass("myClass noClass").addClass("yourClass") pattern.
• No arguments removes all classes from each matched element.
• Array argument supported since jQuery 3.3; callback since 1.4 (callback may return array since 3.3).
• Before jQuery 1.12/2.2 used the className property; since 1.12/2.2 uses the class attribute — works on SVG and XML elements.
• Removing the last class may leave an empty string on the attribute in older browsers.
• To replace all classes at once, use .attr("class", "newClass") instead of chaining remove and add.
• Returns the original jQuery object for chaining — e.g. .removeClass("x").fadeIn().

💡 Best Practices