How to Add and Remove multiple classes in jQuery ?
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 > |
chevron_right
filter_none
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 > |
chevron_right
filter_none
Output:
-
Before clicking on the button:
-
After clicking on the button:
Recommended Posts:
- jQuery | multiple classes Selector
- jQuery | Get and Set CSS Classes
- How to remove all classes that begin with a certain string in JavaScript?
- JQuery | Multiple ID selectors
- jQuery | multiple elements Selector
- How to remove multiple elements from array in JavaScript ?
- jQuery | remove()
- How to fadeOut and remove a div using jQuery ?
- jQuery | Remove Elements
- JQuery | Remove “disabled” attribute from an element
- How to remove all inline styles using JavaScript/jQuery ?
- How to remove options from select element using jQuery ?
- How to remove parent element except its child element using jQuery ?
- How to remove CSS style of <style> tag using JavaScript/jQuery ?
- How to remove table row from table using jQuery ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.