Description:
The Jquery removeClass() method remove the css class for the matched element. It will remove single/multiple classes for each element in the set of matched elements.
Note: The removeClass method will remove all css class names from the selected elements if no parameter is specified.
Syntax
$(selector).removeClass(classname,function(index,currentclass))
| className | Specifies one or more class name to remove for the selected element. More than one class will be give by “space” as separator. |
| function(index,currentclass) | A function that returns one or more class names to remove index : Returns the index position of the matched element currentclass : Returns the current class name of the matched element |
Example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script> <style> .CustomClass { border:2px solid #808080; font-size: 30px; background-color: #4cff00 !important; } .defaultClass { border: 2px solid #808080; width: 400px; height: 100px; background-color: #eed5b7; } </style> <script type="text/javascript"> $(document).ready(function () { $('.btnClass').click(function () { if (this.id == "addMethod") { $('#divCssBoard').addClass("CustomClass", "fast") } else { $('#divCssBoard').removeClass("CustomClass", "fast") } }) }); </script> </head> <body> <button class="btnClass" id="addMethod">Add Class</button> <button class="btnClass" id="removeMethod">Remove Class</button><br /><br /> <div id=divCssBoard class="defaultClass"> Welcome to dotnet-helpers.com </div> </body> </html> |
Output:
As per our code, on clicking of “Add CSS Class” button, it will add the “CustomClass” class to the div & if we click “Remove CSS Class” button, then it will remove “CustomClass” from the div using removeClass() method as shown below.
