The jQuery removeClass() method can be used to remove one or more class names from the selected element. It can also be used to change the class with another class name.
Syntax of removeClass() Method
The syntax of this method is given below:-
Description of the Parameters
The description of the parameters are given below.
| Parameter Name | Description |
|---|---|
| selector | Specify the selector to select the elements and remove the class names. You have to use the tag name, class name, or id of the elements to select. |
| className | It is the name of the class you have to remove from the selected element. You can add one or more class names separated by spaces. |
| index | It returns the index position of the selected element. |
| current_class | It returns the current class name of the selected element. |
| oldclassName | Specify the name of the class you want to remove from the element. |
| newclassName | Specify the name of the class you have to add to the element. |
jQuery removeClass() Method Remove a Class From the Element
When you have to remove the single class name from the selected element, you can use this method. See the example given below that removes a specified class name. It also removes the CSS property added with the class name.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> $(document).ready(function(){ $('.myremoveclassbtn').click(function(){ $("p").removeClass("myparaone"); }); }); </script> <style> .myparaone{ padding:10px; border:1px solid #ccc; } </style> <button type="button" class="myremoveclassbtn">Click to Remove Class</button><br><br> <p class="myparaone">This is my paragraph</p> |
Output
This is my paragraph
You have to click the button given above to remove the class names. The removed class contains the CSS properties which automatically get removed on class removal.
Remove One or More Classes Using the Method
The jQuery removeClass() method can also be used to remove more than one class name. You have to specify the class names with spaces as given in the example below. The example removes the two classes from the selected element.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script> $(document).ready(function(){ $('.myremovemulticlassbtn').click(function(){ $("p").removeClass("paraone paratwo"); }); }); </script> <style> .paraone{ padding:10px; border:1px solid #ccc; } .paratwo{ background:orange; color:#fff; } </style> <button type="button" class="myremovemulticlassbtn">Click to Remove Multiple Classes</button><br><br> <p class="paraone paratwo">This is my paragraph</p> |
Output
This is my paragraph
When you click the button given above, it removes the two specified classes from the selected element. See the difference after you click the above button.
How to Replace One Class with Another Using jQuery
In addition to all the above, you can also use the method to replace the class names with another. You have to use jQuery removeClass() method with jQuery addClass() method as given below.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<script> $(document).ready(function(){ $('.replaceclassbtn').click(function(){ $("p").removeClass("myoldpara").addClass("mynewpara"); }); }); </script> <style> .myoldpara{ background:pink; padding:10px; border:1px solid #ccc; color:#fff; } .mynewpara{ background:orange; padding:15px; border:1px solid #ccc; color:red; } </style> <button type="button" class="replaceclassbtn">Click to Replace Class</button><br><br> <p class="myoldpara">This is my paragraph</p> |
Output
This is my paragraph
After you click the button, the class gets replaced with the new one. The new class also contains some styles that automatically gets added on class addition.
You may also like to read
I hope you like this tutorial on jQuery removeClass() method. If you have any queries regarding the tutorial, please comment below.
References