How to Add and Remove multiple classes in jQuery ? Last Updated : 12 Jul, 2025 Summarize Comments Improve Suggest changes Share Like Article Like 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. html <!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. html <!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. Comment More infoAdvertise with us Next Article How to add and remove CSS classes to an element using jQuery ? P PranchalKatiyar Follow Improve Article Tags : JQuery jQuery-Misc Similar Reads How to Add or Remove class in jQuery ? In this article, we are going to learn about the different methods to add and remove classes from an HTML element using jQuery. There are two ways in which we can achieve this in jQuery.Table of Content Using the addClass() and removeClass() methodsUsing the toggleClass() methodUsing the addClass() 3 min read jQuery multiple classes Selector The jQuery multiple class selector is used to select multiple classes of an HTML document. Syntax: $(".class1, .class2, .class3, ...")Parameter: class: This parameter is required to specify the class of the elements to be selected.Example 1: In this example, we will select the multiple classes by us 1 min read How to Toggle Between Two Classes in jQuery ? In this article, we will see how to toggle between two classes in jQuery. To make the classes toggle, we will use toggleClass() method. The toggleClass() method is used to toggle or switch the class with the selected class element. Syntax: $(selector).toggleClass(class1 class2) Example 1: In this ex 2 min read How to Add and Remove HTML Attributes with jQuery? Using jQuery, we can dynamically add and remove HTML attributes such as placeholder, style, and more to enhance the interactivity and functionality of web elements based on user actions. We will explore two different approaches to adding and removing HTML attributes with jQuery. Below are the possib 2 min read How to add and remove CSS classes to an element using jQuery ? In this article, we will see how to add or remove the CSS classes to an element using jQuery. To add the CSS classes to an element we use addClass() method, and to remove the CSS classes we use removeClass() method. Syntax: The syntax for adding CSS classes to an element: $('selector').addClass(clas 2 min read How to remove all CSS classes using jQuery ? In this article, we will remove all CSS classes for an element using jQuery. To remove all CSS classes of an element, we use removeClass() method. The removeClass() method is used to remove one or more class names from the selected element. Syntax: $(selector).removeClass(class_name, function(index, 2 min read Like