Open In App

jQuery removeClass() Method

Improve
Improve
Like Article
Like
Save
Share
Report

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

jquery-26

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

jquery-27

Related Articles:



Last Updated : 10 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads