jQuery addClass() and removeClass()

The addClass() method adds one or more CSS classes to elements. The removeClass() method removes them. These two methods are the building blocks of dynamic styling in jQuery — instead of writing inline CSS, you apply and remove pre-written CSS classes.

addClass() — Adding Classes

Syntax

$(selector).addClass("className");
$(selector).addClass("class1 class2 class3");   // add multiple

Basic Example

HTML:
<p id="intro">Welcome to jQuery!</p>

CSS:
.highlight { background: yellow; font-weight: bold; }

jQuery:
$("#intro").addClass("highlight");

Result: The paragraph gets a yellow background and bold text.

Diagram: addClass() Flow

  Before:
  <p id="intro">Welcome to jQuery!</p>
  (no class — plain text)

  $("#intro").addClass("highlight");

  After:
  <p id="intro" class="highlight">Welcome to jQuery!</p>
  (yellow background, bold text applied by CSS)

Adding Multiple Classes

$("button").addClass("btn btn-primary large-text");
// Adds three classes at once, separated by spaces

addClass() with a Function

Pass a function to add classes dynamically based on each element's current state or position.

$("li").addClass(function(index) {
    return "item-" + index;
});

// Result:
// First li gets class="item-0"
// Second li gets class="item-1"
// Third li gets class="item-2"

removeClass() — Removing Classes

Syntax

$(selector).removeClass("className");
$(selector).removeClass("class1 class2");   // remove multiple
$(selector).removeClass();                  // remove ALL classes

Basic Example

$(document).ready(function() {
    $("#deactivate").click(function() {
        $(".active-item").removeClass("active");
    });
});

Diagram: removeClass() Flow

  Before:
  <div class="card active featured">Content</div>

  $("div").removeClass("active");

  After:
  <div class="card featured">Content</div>

  Only "active" is removed. "card" and "featured" remain.

Remove Multiple Classes

$(".card").removeClass("active featured");
// Removes both "active" and "featured"
// Other classes on the element are not affected

Remove All Classes

$("#element").removeClass();
// Removes every class from the element
// The element remains, just with no class attribute

Practical: Tab Navigation

HTML:
<ul id="tabs">
    <li class="tab active" data-target="panel1">Tab 1</li>
    <li class="tab" data-target="panel2">Tab 2</li>
    <li class="tab" data-target="panel3">Tab 3</li>
</ul>
<div id="panel1" class="panel">Content of Tab 1</div>
<div id="panel2" class="panel hidden">Content of Tab 2</div>
<div id="panel3" class="panel hidden">Content of Tab 3</div>

jQuery:
$(document).ready(function() {
    $(".tab").click(function() {
        // Remove active from all tabs, add to clicked
        $(".tab").removeClass("active");
        $(this).addClass("active");

        // Hide all panels, show the target one
        $(".panel").addClass("hidden");
        var target = $(this).data("target");
        $("#" + target).removeClass("hidden");
    });
});

Diagram: Tab Click Flow

  User clicks "Tab 2":

  Step 1: .tab.removeClass("active")  → all tabs lose active style
  Step 2: $(this).addClass("active")  → Tab 2 gets active style
  Step 3: .panel.addClass("hidden")   → all panels hide
  Step 4: #panel2.removeClass("hidden") → Tab 2 panel shows

Practical: Form Field Validation Style

$(document).ready(function() {
    $("#email").blur(function() {
        var val = $(this).val();
        if (val === "" || val.indexOf("@") === -1) {
            $(this).removeClass("valid").addClass("invalid");
        } else {
            $(this).removeClass("invalid").addClass("valid");
        }
    });
});

addClass() vs css()

Quick Summary

• addClass("name") adds a CSS class to selected elements without removing existing classes.
• removeClass("name") removes a specific class; calling with no argument removes all classes.
• Add or remove multiple classes at once by separating names with spaces.
• Prefer addClass()/removeClass() over css() for maintainable, reusable styles.

Storing State with Classes

Classes are an excellent way to store the UI state of an element without using JavaScript variables. Any code can check hasClass() to read the state and addClass() or removeClass() to change it — making your logic readable and your CSS easy to test.

// Mark a task as complete using a class
$(".task").click(function() {
    $(this).toggleClass("completed");
});
// CSS: .completed { text-decoration: line-through; opacity: 0.5; }