jQuery Add or Remove CSS Classes

1. jQuery CSS Class Manipulation

jQuery makes it easy to dynamically add, remove, toggle, and check CSS classes on HTML elements. By leveraging these methods, you can change styles, trigger animations, and maintain state without writing verbose JavaScript code. In this tutorial, you’ll learn how to use the following jQuery methods to manipulate CSS classes effectively:

1.1. Key Methods for Class Manipulation

• .addClass(): Add one or more CSS classes to selected elements.
• .removeClass(): Remove one or more CSS classes from selected elements.
• .toggleClass(): Toggle CSS classes on selected elements, adds class if missing, and removes if present.
• .hasClass(): Check if any selected element has the specified class.

2. Add Classes with addClass() Method

The jQuery addClass() method adds the specified class(es) to each element in the matched set. You can pass multiple classes separated by spaces or compute class names via a function.

$(document).ready(function() {
	$('#addClassBtn').click(function() {
		$('#myBox').addClass('highlighted');
	});
});

2.1. Add Multiple Classes to an Element

This example uses addClass() method to apply multiple CSS classes at once. Clicking the button transforms the box with a rounded shape, orange background, and shadow effect.

$(document).ready(function(){
	$('#addClassesBtn').click(function(){
		$('#myBox').addClass('rounded bg-orange shadow');
	});
});

2.2. Add a Class to Multiple Elements

This example uses the addClass() method to apply the highlight class to multiple elements when the button is clicked.

$(document).ready(function(){
	$('#highlightAll').click(function(){
		$('.box1, .box2, .box3').addClass('highlight');
	});
});

3. Remove Classes with removeClass() Method

The jQuery removeClass() method removes the specified class(es) from each element in the matched set. If no class is specified, all classes are removed.

$(document).ready(function() {
	$('#removeClassBtn').click(function() {
		$('#myBox').removeClass('highlighted');
	});
});

3.1. Remove Multiple Classes from an Element

This example removes multiple classes at once, resetting the element’s style when the button is clicked.

 
$(document).ready(function(){
	$('#removeClassesBtn').click(function(){
		$('#myBox').removeClass('rounded bg-orange shadow');
	});
}); 

3.2. Remove a Class from Multiple Elements

This example uses removeClass() to remove a shared class from multiple elements at once.

 
$(document).ready(function(){
	$('#removeHighlightBtn').click(function(){
		$('.box1, .box2, .box3').removeClass('highlight');
	});
});

4. Toggle Classes with toggleClass() Method

The jQuery toggleClass() method adds the class if it is missing, or removes it if it is present. You can also pass a boolean to force add (true) or remove (false).

$(document).ready(function() {
	$('#toggleClassBtn').click(function() {
		$('#myBox').toggleClass('highlighted');
	});
});

This example uses toggleClass(className, state) to forcefully add or remove a class based on a boolean. Clicking "Highlight On" button adds the class whereas the "Highlight Off" button removes it.

$(document).ready(function() {
	$('#setTrueBtn').click(function() {
		$('#myBox').toggleClass('highlighted', true);
	});
	$('#setFalseBtn').click(function() {
		$('#myBox').toggleClass('highlighted', false);
	});
});

5. Check Classes with hasClass() Method

The jQuery hasClass() method returns a boolean indicating whether any of the matched elements has the specified class. Useful for conditional logic.

$(document).ready(function() {
	$('#checkClassBtn').click(function() {
		if ($('#statusBox').hasClass('active')) {
			$('#resultMsg').text('Yes, the box has the "active" class.');
		} else {
			$('#resultMsg').text('No, the box does not have the "active" class.');
		}
	});
});