jQuery provides the removeClass() method to remove one or more CSS classes from an element. The interesting thing of this method is that if you call it without specifying a class name, it simply removes all the classes from an element.
Given the following markup:
<p id="test" class="one two three">Test</p>
With the following CSS classes:
.one {
background: #ffc;
padding: 1em;
}
.two {
border: 0.1em solid #f70;
}
.three {
border-radius: 6px;
box-shadow: 2px 2px 3px #ccc;
}
We can use removeClass() as follows:
$(function() {
$('#test').click(function() {
$(this).removeClass();
});
});
All the CSS classes attached to the element will be removed. You can see the demo below.