As their name says, the jQuery's
removeClass() methods simply add and remove classes on a given element, respectively. However, they differ greatly in how they work. In fact, the
addClass() method makes use of the
className property and some regular expressions to attach one or more classes to an element. Example:
$('#test').addClass('foo'); // adds the class 'foo' $('#bar').addClass('foo bar'); // adds the classes 'foo' and 'bar'
You can attach multiple classes to an element by simply providing a space-separated list of valid class names. But the real interesting thing happens when you remove a class through the
removeClass() method. Example:
$('#test').removeClass('foo'); // removes the class 'foo' $('#bar').removeClass('foo bar'); // removes the classes 'foo' and 'bar'
To remove classes, jQuery doesn't use the core DOM method
removeAttribute() because of the backward compatibility with Internet Explorer 6. Instead, it uses regular expressions to replace the value of the
class attribute with an empty string. If you take a look at the
class attribute after using this method, you will see something like this:
<div id="test" class=""></div> <div id="bar" class=""></div>
As you can see, the
class attribute is still present in the DOM, but it has no impact on page layout because its value is empty.