How to Add and Remove multiple classes in jQuery ?

0 0 1 minute read

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.