In this tutorial, you will learn about how you can add and remove the class in jQuery at any event-driven like click, hover, blur, etc.
We will use the jQuery object methods addClass() and removeClass(). The addClass() method is used to add the CSS classes to any element and the removeClass() method is used to remove any specific class.
You can call these methods on your webpage on any event listener. You can also add or remove multiple classes at once. We will see one by one examples.
So, let’s get started working with jQuery to add and remove classes from elements.
Add Class in jQuery
Let’s first start with how to add a class to an element using the jQuery method. We will use the addClass() method to add a class by targeting the selectors.
addClass() method will add the classes to the selected elements and it does not remove the existing classes from the elements.
Let’s take the example to add a class that changes the color of text when clicking on a button. You can use this method for any event.
In this above example, when you click on the button you will see the second paragraph is highlighted because we have added the class to that paragraph which has the color blue and bold font style.
Add Multiple Classes
addClass() method, you can also specify the multiple classes to the selected elements. To add multiple classes, separate the class name with the spaces.
The above code will add the two classes “primary-text” and “important”. You can specify as much as you want.
Remove Class in jQuery
So now let’s see how to remove the class from the elements. To remove the class from the elements, we will use the removeClass() jQuery method.
removeClass() method is used to remove the specific class from the elements targeted by the selector. It will only remove the defined class, but if you haven’t defined any class as a parameter, it will remove all the classes from the elements.
Let’s say now we want to remove the “primary-text” class from the above example of the addClass() method. The text color will change to default from the blue color.
The above code will add and remove the “primary-text” class from the elements when you click on the respective button.
Remove Multiple Classes
You can also remove the multiple classes using the
removeClass() method, you have to specify the multiple classes separated by spaces that you want to remove from the elements.
In the above examples code, you see how to add and remove the class “primary-text” from the elements using the addClass() and removeClass() methods.
But do you know there is one more method toggleClass()? This method you can use in case you want to add or remove the same class from the elements.
Toggle Class in jQuery
To toggle the same class to an element, you can use the
toggleClass() method. It will add or remove class from elements if the class name is the same in both cases.
This method toggle between adding and removing the classes from the selected elements. It checks the elements with specified class, if the class is missing then add it or if already set then remove it.
You can also remove the multiple classes using this toggleClass() method. And you can pass the switch parameter to only add a class or only remove a class.
Here is the codepen example of adding, removing, and toggling class.