jQuery removeClass() Method Tutorial

jQuery removeClass() Method Tutorial

The jQuery removeClass() method, as the name suggests, is used to remove one or more class names from a selector. For removing multiple class names, separate those using spaces.

Syntax of jQuery removeClass

$(selector).removeClass(classname,function(index,currentclass))
Parameter Description
classname Required Parameter: names of the classes to be removed from the selector. If more than one, use space to separate them.
function(index,currentClass) Optional Parameter: A function that returns one or more class names that are spaces-separated. The returned class names are removed from the selector.

  • index: index position of the element in the selector.
  • currentClass: current class names of the element in the selector.

Example 1: Remove a Single Class Name

I have a paragraph element that has a Class Name “red”.

<style>
.red {
    color: Red;
}
</style>

<p id="myParagraph" class="red">My Paragraph</p>
<button id="myButton">Remove Class</button>

On the button Click I use jQuery removeClass for removing this red class:

$("#myButton").click(function (e) {
    $("#myParagraph").removeClass("red");
});

The above jQuery code will remove the red Class from the paragraph and its color changes to Green (default color).

DEMO

Example 2: Remove 3 Class Names

I can remove more than one class from the selector using jQuery removeClass method.
Here I remove 3 Classes from the paragraph element. These classes are “red”, “fontBold” and “borderSolid”.

<style>
.red {
    color: Red;
}

.fontBold {
    font-weight: bold;
}

.borderSolid {
    border: solid 1px #4CAF50;
}
</style>

<p id="myParagraph" class="red borderSolid fontBold">My Paragraph</p>
<button id="myButton">Remove 3 Class</button>

The jQuery code:

$("#myButton").click(function (e) {
    $("#myParagraph").removeClass("red fontBold borderSolid");
});

In the above jQuery removeClass code I gave the three classes name separated by space.
So on the button click event the myParagraph element will lose its “red”, “fontBold” and “borderSolid” classes.

DEMO

Example 3: Using jQuery removeClass Function Parameter

The class names returned by this function are removed from the selector.

I have 3 paragraph element, 2 have “red” and “fontBold” classes while the 3rd has “fontBold” class.

Now I want to remove “red” & “borderSolid” classes from these paragraphs.

<style>
.red {
    color: Red;
}

.fontBold {
    font-weight: bold;
}

.borderSolid {
    border: solid 1px #4CAF50;
}
</style>

<p class="red borderSolid">First Paragraph with class "Red"</p>
<p class="red">Second Paragraph with class "Red"</p>
<p class="fontBold">Third Paragraph without any class</p>
<button id="myButton">Add Class</button>

The jQuery addClass code will be:

$("#myButton").click(function (e) {
    $("p").removeClass(function (index, currentClass) {
        return "red borderSolid";
    });
});

I retuned “red borderSolid” from the function and these 2 classes will be removed from the selector.

DEMO DOWNLOAD

Obviously the 3rd paragraph having “fontBold” class remains unharmed.

Share this article -

yogihosting

ABOUT THE AUTHOR

This article has been written by the Technical Staff of YogiHosting. Check out other articles on "WordPress, SEO, jQuery, HTML" and more.