How to Add and Remove multiple classes in jQuery ? - GeeksforGeeks

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.
jQuery-Misc
JavaScript
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
How to Open URL in New Tab using JavaScript ?
JQuery | Set the value of an input text field
Form validation using jQuery
How to change selected value of a drop-down list using jQuery?
How to change the background color after clicking the button in JavaScript ?
How to Dynamically Add/Remove Table Rows using jQuery ?