Skip to content
Related Articles

Related Articles

jQuery | removeClass() with Examples

View Discussion
Improve Article
Save Article
  • Last Updated : 13 Feb, 2019
View Discussion
Improve Article
Save Article

The removeClass() method is an inbuilt method in jQuery which 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 optional parameter which is used to specify the class name (one or more class) to remove. Multiple class name separated with space.
  • function: It is optional parameter and it returns one or more class name which need to be removed.
    • index: This parameter is used to return index of element.
    • current_class_name: This parameter returns the class name of selected elements.

Return Value: This method returns the selected element with specified removed class name.

Below examples illustrate the removeClass() method in jQuery:

Example 1:




<html>
    <head>
        <title>The removeClass Method</title>
        <script src=
        </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:
Before click on the paragraph:

After click on the paragraph:

Example 2: This example does not contains parameter. This will remove all class for the selected element.




<!DOCTYPE html>
<html>
    <head>
        <title>The removeClass Method</title>
        <script src=
        </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:
Before click on the paragraph:

After click on the paragraph:

Related Articles:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!