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
1
| $(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.
|
Example 1: Remove a Single Class Name
I have a paragraph element that has a Class Name red.
1
2
3
4
5
6
7
8
| <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:
1
2
3
| $("#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).
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <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:
1
2
3
| $("#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.
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <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:
1
2
3
4
5
| $("#myButton").click(function (e) { $("p").removeClass(function (index, currentClass) { return "red borderSolid"; });}); |
I returned red borderSolid from the function and these 2 classes will be removed from the selector.
Obviously the 3rd paragraph having fontBold class remains unharmed.
