Remove all CSS classes from an HTML element with JavaScript/jQuery

This post will discuss how to remove all CSS classes from an element using JavaScript and jQuery.

1. Using jQuery’s .removeAttr() method

With jQuery, you can use the .removeAttr() method to remove the class attribute from an element. It is equivalent to the JavaScript’s removeAttribute() method.

Edit in JSFiddle

 
However, this won’t remove any inline styling applied to the element. We can handle this removing the style attribute from the element.

Edit in JSFiddle

2. Using jQuery’s .removeClass() method

You can also use the no-arg .removeClass() method for removing all class from the element. Note, this won’t remove any inline styling applied to the element.

Edit in JSFiddle

3. Using jQuery’s .attr() method

Setting the class attribute to empty will remove all classes from the element but also leaves an empty class attribute on the DOM.

Edit in JSFiddle

 
To remove the inline styling applied to the element, you can set the style attribute to empty:

Edit in JSFiddle

4. Using JavaScript’s removeAttribute() method

In plain JavaScript, you can use the removeAttribute() method to remove the class attribute from an element. To remove all the inline styles as well, you can remove the style attribute as well.

Edit in JSFiddle

5. Using JavaScript’s className property

Alternatively, you can set the className attribute to empty, which would set the value of the class attribute of the specified element to null.

This won’t remove the inline styles from the element, but you can remove them by setting the style attribute to empty:

Edit in JSFiddle

That’s all about removing all CSS classes from an element using JavaScript and jQuery.