The removeClass() method is an inbuilt method in jQuery that is used to remove one or more class names from the selected element.
Syntax:
$(selector).removeClass(class_name, function(index, current_class_name))Parameters: This function accepts two parameters as mentioned above and described below:
- class_name: It is an optional parameter that is used to specify the class name (one or more class) to remove. Multiple class names are separated with space.
- function: It is an optional parameter and it returns one or more class names that need to be removed.
- index: This parameter is used to return the index of the element.
- current_class_name: This parameter returns the class name of selected elements.
Return Value: This method returns the selected element with the specified removed class name.
The below examples illustrate the removeClass() method in jQuery:
Example 1:
<!DOCTYPE html>
<html>
<head>
<title>The removeClass Method</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- jQuery code to show the working of this method -->
<script>
$(document).ready(function () {
$("p").click(function () {
$("p").removeClass("GFG");
});
});
</script>
<style>
.GFG {
font-size: 120%;
color: green;
font-weight: bold;
font-size: 35px;
}
div {
width: 50%;
height: 200px;
padding: 20px;
border: 2px solid green;
}
</style>
</head>
<body>
<div>
<!-- click on any paragraph and see the change -->
<p class="GFG">
Welcome to
</p>
<p class="GFG">
GeeksforGeeks
</p>
</div>
</body>
</html>
Output:
Example 2: This example does not contain a parameter. This will remove all classes for the selected element.
<!DOCTYPE html>
<html>
<head>
<title>The removeClass Method</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- jQuery code to show the working of this method -->
<script>
$(document).ready(function () {
$("p").click(function () {
$("p").removeClass();
});
});
</script>
<style>
.GFG {
font-size: 120%;
color: green;
font-weight: bold;
font-size: 35px;
}
div {
width: 300px;
height: 200px;
padding: 20px;
border: 2px solid green;
}
</style>
</head>
<body>
<div>
<!-- click on any paragraph and see the change -->
<p class="GFG">
Welcome to
</p>
<p class="GFG">
GeeksforGeeks!
</p>
</div>
</body>
</html>
Output:
Related Articles:
