How to remove all CSS classes using jQuery/JavaScript?

How to remove all CSS classes using jQuery/JavaScript?

Instead of individually calling $(“#item”).removeClass() for every single class an element might have, is there a single function which can be called which removes all CSS classes from the given element?
Both jQuery and raw JavaScript will work.

Solutions/Answers:

Solution 1:

$("#item").removeClass();

Calling removeClass with no parameters will remove all of the item’s classes.


You can also use (but is not necessarily recommended, the correct way is the one above):

$("#item").removeAttr('class');
$("#item").attr('class', '');
$('#item')[0].className = '';

If you didn’t have jQuery, then this would be pretty much your only option:

document.getElementById('item').className = '';

Solution 2:

Hang on, doesn’t removeClass() default to removing all classes if nothing specific is specified? So

$("#item").removeClass();

will do it on its own…

Solution 3:

Of course.

$('#item')[0].className = '';
// or
document.getElementById('item').className = '';

Solution 4:

Just set the className attribute of the real DOM element to '' (nothing).

$('#item')[0].className = ''; // the real DOM element is at [0]

Edit: Other people have said that just calling removeClass works – I tested this with the Google JQuery Playground: http://savedbythegoog.appspot.com/?id=ag5zYXZlZGJ5dGhlZ29vZ3ISCxIJU2F2ZWRDb2RlGIS61gEM … and it works. So you can also do it this way:

$("#item").removeClass();

Solution 5:

The shortest method

$('#item').removeAttr('class').attr('class', '');

Solution 6:

Heh, came searching for a similar answer.
Then it hit me.

Remove Specific Classes

$('.class').removeClass('class');

Say if element has class=”class another-class”