How to Add or Remove Classes in HTML Elements using jQuery
In this article, we will explore how to dynamically add or remove classes from HTML elements using jQuery.
In HTML, the class attribute is used to assign one or more classes to an element. A class acts as a reference point for CSS and JavaScript, enabling targeted styling and manipulation.
When you assign a class to an HTML element, you can define specific styles for that class in your CSS file. By targeting the class selector, you can apply those styles to all elements with the same class, regardless of their tag names. This allows for consistent and efficient styling across multiple elements.
Why Add or Remove Classes Dynamically?
There are numerous scenarios where you may need to add extra classes to or remove classes from an HTML element. Here are a few common use cases:
- Dynamic Styling: Adding or removing classes dynamically allows you to change the appearance of an element based on user interactions or certain conditions. For example, you can highlight a selected item in a list by adding a "selected" class to it.
- Animation and Effects: Adding or removing classes can trigger animations or effects defined in CSS. By applying or removing classes at specific points, you can create smooth transitions or dynamic visual effects on your web page.
- State Management: Classes can be used to represent the state of an element. By adding or removing classes, you can toggle between different states, such as "active" or "disabled," to control the behavior or appearance of an element.
How to Add Classes using jQuery
To add a class to an HTML element using jQuery, we use the addClass() function. This function allows you to append one or more classes to an element.
Syntax
$(selector).addClass(value)
Example
HTML
<button id="mybtn" type="button">Save changes</button>
jQuery
$(function(){
$("#mybtn").addClass("btn-success");
});
The above example demonstrates how to add a class to a button element. The addClass() function targets the element with the ID "mybtn" and appends the class "btn-success".
Example 2
Adding multiple classes to an HTML element using the jQuery addClass() function.
$(function(){
$("#mybtn").addClass("btn btn-lg btn-success");
});
In the above example, we have added three classes: "btn", "btn-lg", and "btn-success" to the element with the ID "mybtn".
The addClass() function can be used to add classes to an element with no class (without class attribute) or to one with existing class(es).
When an element has an existing class, that class can be used as the selector when targeting the element.
How to Remove Classes using jQuery
Removing classes from an HTML element can be done using the removeClass() function in jQuery. This function allows you to remove one or more classes from the element.
Syntax
$(selector).removeClass(value)
Example
HTML
<button id="mybtn" type="button" class="btn btn-lg btn-success">Save changes</button>
jQuery
$(function(){
$("#mybtn").removeClass("btn-lg");
});
In the above example, we had a button with three classes: "btn", "btn-lg", and "btn-success". We have used its ID as the selector and the removeClass() function to remove the "btn-lg" class.
Example 2
Using a class as the selector to target the element and removing all of its three classes.
$(function(){
$(".btn").removeClass("btn btn-lg btn-success");
});
Managing Classes using the jQuery attr() function
The attr() function is used to set or return attribute values for the selected elements.
When this function is used to set attribute values, it sets one or more attribute/value pairs for the set of matched elements.
Syntax
Setting an attribute and value.
$(selector).attr(attributeName,value)
Setting multiple attributes and values.
$(selector).attr({attributeName:value, attributeName:value,...})
Example
$(function(){
$("#mybtn").attr("class", "btn");
});
To set multiple classes to an element, pass them all together in the 'value' argument.
Example
$(function(){
$("#mybtn").attr("class", "btn btn-lg btn-success");
});
Unlike the addClass() and removeClass() functions that can be used to add or remove one class individually, the attr() sets all the classes to the attribute at once.
Using this method, if you want to remove a class from an element, then you have to set the value of the class attribute the same way but omitting that specific class you want to remove.
For example, if you have an element with three classes, "btn", "btn-lg", and "btn-success" and want to remove the "btn-success" class, you will omit it as below.
Example
$(function(){
$("#mybtn").attr("class", "btn btn-lg");
});
That's it!
Now you know how to add, remove or change the classes of HTML elements dynamically using jQuery addClass(), removeClass(), and attr() functions.
