jQuery .removeClass()

If a class name is included as a parameter, then only that class will be removed from the set of matched elements. If no class names are specified in the parameter, all classes will be removed.

The .removeClass() method manipulates the className property of the selected elements, not the class attribute. Once the property is changed, it’s the browser that updates the attribute accordingly. This means that when the class attribute is updated and the last class name is removed, the browser may set the attribute’s value to an empty string instead of removing the attribute completely. An implication of this behavior is that this method only works for documents with HTML DOM semantics (e.g., not pure XML documents).

More than one class may be removed at a time, separated by a space, from the set of matched elements, like so:

$( "p" ).removeClass( "myClass yourClass" )

This method is often used with .addClass() to switch elements’ classes from one to another, like so:

$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );

Here, the myClass and noClass classes are removed from all paragraphs, while yourClass is added.

To replace all existing classes with another class, we can use .attr( "class", "newClass" ) instead.

As of jQuery 1.4, the .removeClass() method allows us to indicate the class to be removed by passing in a function.

$( "li:last" ).removeClass(function() {
 return $( this ).prev().attr( "class" );
});

This example removes the class name of the penultimate <li> from the last <li>.