Remove CSS Class Using jQuery

By bhagwatchouhan
Remove CSS Class Using jQuery

The removeClass function provided by jQuery can be used to remove the single class, multiple classes, and all classes as shown below.

// Remove all the classes
jQuery( <selector> ).removeClass();
// Remove single class jQuery( <selector> ).removeClass( <class name> );
// Remove multiple classes jQuery( <selector> ).removeClass( <class1 class2 class3> );

We can remove all the classes by simply calling the removeClass function without passing any argument. A single class can be removed by passing the class name as a function argument. We can also remove multiple classes by passing the class names separated by space.

The HTML used for the examples is as shown below.

<div class="wrap-items">
	<div class="wrap-item">
		<div class="item">
			<!-- item element -->
		</div>
		<div class="item has-price">
			<!-- item element -->
		</div>
		<div class="item has-gallery">
			<!-- item element -->
		</div>
		<div class="item has-image">
			<!-- item element -->
		</div>
	</div>
</div>

The below-mentioned examples show how we can remove either all or single or multiple classes.

// Remove all the classes from elements having class item
jQuery( '.item' ).removeClass();
// Remove the class has-price from elements having class item // Note that we do not need to use dot(.) for the argument passed to removeClass function jQuery( '.item' ).removeClass( 'has-price' );
// Remove the classes has-price and has-image jQuery( '.item' ).removeClass( 'has-price has-image' );

The more advanced usage is by passing a function as an argument to the removeClass method as shown below.

jQuery( ".item" ).removeClass( function() {
	return jQuery( this ).closest( ".wrap-item" ).attr( "data-class" );
});

Share this blog:

Profile picture for user bhagwatchouhan
bhagwatchouhan