jQuery removeClass() Method
Last Updated : 11 Jul, 2025
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= "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.
html <!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: