Home > jQuery > How to Add and Remove Class in jQuery?

How to Add and Remove Class in jQuery?

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.

The addClass() method will add the classes to the selected elements and it does not remove the existing classes from the elements.

Syntax

Example

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

Using the 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.

The 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.

Syntax

Example

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.

Syntax

Example

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.

See the Pen
Add or Remove Class in jQuery
by Aman Mehra (@amanmehra)
on CodePen.

Photo of author

About Aman Mehra

Hey there! I'm Aman Mehra, a full-stack developer with over six years of hands-on experience in the industry. I've dedicated myself to mastering the ins and outs of PHP, WordPress, ReactJS, NodeJS, and AWS, so you can trust me to handle your web development needs with expertise and finesse. In 2021, I decided to share my knowledge and insights with the world by starting this blog. It's been an incredible journey so far, and I've had the opportunity to learn and grow alongside my readers. Whether you're a seasoned developer or just dipping your toes into the world of web development, I'm here to provide valuable content and solutions to help you succeed. So, stick around, explore the blog, and feel free to reach out if you have any questions or suggestions. Together, let's navigate the exciting world of web development!

Leave a Comment