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