Open In App

How to Add and Remove multiple classes in jQuery ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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 =
        </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 =
        </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.



Last Updated : 03 Aug, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads