jQuery removeClass() Method
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:
html
<!DOCTYPE html>
< html >
< head >
< title >The removeClass Method</ title >
< script src =
</ script >
< 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 >
< 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.
html
<!DOCTYPE html>
< html >
< head >
< title >The removeClass Method</ title >
< script src =
</ script >
< 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 >
< p class = "GFG" >
Welcome to
</ p >
< p class = "GFG" >
GeeksforGeeks!
</ p >
</ div >
</ body >
</ html >
|
Output:
Related Articles:
Last Updated :
10 Jul, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...