How to Add and Remove multiple classes in jQuery ?

Last Updated : 03 Aug, 2021

Given an HTML element and the task is to add and remove multiple classes from it using JQuery.

Approach:

First select the element to which multiple classes will be added.
Then use addClass() method to add multiple classes to the element and removeClass() method to remove multiple classes.

Example 1: This example add two classes color and fontWeight to the selected element using addClass() method.

<!DOCTYPE HTML> 
<html> 
    <head> 
        <title> 
            How to Add and Remove multiple classes
        </title>
          
        <script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
        </script>
          
        <style>
            .color {
                color: red;
            }
            .fontWeight {
                font-weight: bold;
            }
        </style>
    </head> 
      
    <body style = "text-align:center;"> 
          
        <h1 style = "color:green;" > 
            GeeksForGeeks 
        </h1>
          
        <p id = "GFG_UP" style = "font-size: 19px;">
        </p>
          
        <button onClick = "GFG_Fun()">
            click here
        </button>
          
        <p id = "GFG_DOWN" style = 
            "color: green; font-size: 24px; font-weight: bold;">
        </p>
          
        <script>
            $('#GFG_UP').text("Click on button to add multiple"
                + " classes to this element");
              
            function GFG_Fun() {
                $("#GFG_UP").addClass("color fontWeight");
                $('#GFG_DOWN').text("color and fontWeight,"
                        + " Both classes added");
            }
        </script> 
    </body> 
</html>                    

Output:

Before clicking on the button:
After clicking on the button:

Example 2: This example remove two classes color and fontWeight from the selected element using removeClass() method.

<!DOCTYPE HTML> 
<html> 
    <head> 
        <title> 
            How to Add and Remove multiple classes
        </title>
          
        <script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
        </script>
          
        <style>
            .color {
                color: red;
            }
            .fontWeight {
                font-weight: bold;
            }
        </style>
    </head> 
      
    <body style = "text-align:center;"> 
          
        <h1 style = "color:green;" > 
            GeeksForGeeks 
        </h1>
          
        <p id = "GFG_UP" class = "color fontWeight"
                style = "font-size: 19px;">
        </p>
          
        <button onClick = "GFG_Fun()">
            click here
        </button>
          
        <p id = "GFG_DOWN" style =
            "color: green; font-size: 24px; font-weight: bold;">
        </p>
          
        <script>
            $('#GFG_UP').text("Click on button to remove"
                + " multiple classes to this element");
              
            function GFG_Fun() {
                $("#GFG_UP").removeClass("color fontWeight");
                $('#GFG_DOWN').text("color and fontWeight,"
                        + " Both classes removed");
            }
        </script> 
    </body> 
</html>                    

Output:

Before clicking on the button:
After clicking on the button:

jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.
You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.

My Personal Notes

Related Articles

How to Add and Remove multiple classes in jQuery ?