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" );
});