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:
<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.
