Removeclass() using jQuery

The removeclass() method is an inbuilt method in jQuery, which can be used to remove one or more class name from a selected element. It will remove a single or multiple or entire classes at once from the selected elements. Here is the syntax;

Syntax for removeclass()

$(selector).removeClass(classname,function(index,currentclass))

For example:

$(“div”).removeClass(“class_to_remove”);

The above example code will remove the given class from all div elements in the website.

If you want to remove more than one class, then you have to try out the below mentioned code.

$(“div”).removeClass(“class_1 class_2 class_3”);

To remove all classed;

$(“div”).removeClass(“”);

Example for the removeclass() method in jQuery

<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">UsejQuery</p> 
        </div> 
    </body> 
</html>

Another Example to remove all Class for the Selected Element

This example does not contains any parameter.

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

Note: If a class name is included as a parameter, then only that mentioned class will be removed from the set of elements. If no class mentioned in the parameter, then all classes will be removed.

Leave a Reply

Your email address will not be published. Required fields are marked *