874

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.

0

13 Answers 13

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

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


You can also use (but it 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 = '';
5
  • 9
    Shouldn't the attr() version be prop() now?
    – Mike
    Commented Mar 18, 2016 at 23:20
  • 9
    Calling removeClass() without parameters does not seem to work anymore in version 1.11.1
    – Vincent
    Commented Apr 23, 2016 at 21:34
  • 3
    @Vincent Seems like a bug introduced in jQuery since their documentation explicitly states this: 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. api.jquery.com/removeclass Commented Jun 20, 2016 at 16:34
  • 1
    Yes, I also suspect it's a bug, and not by design. In the meantime, the following pure JavaScript works just fine. document.getElementById("item").removeAttribute("class");
    – Vincent
    Commented Jun 20, 2016 at 20:29
  • 3
    There is a problem with jQuery UI 1.9. If removeClass() didn't work use removeAttr('class')
    – Milad
    Commented Feb 5, 2017 at 6:51
130

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

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

will do it on its own...

2
  • 3
    yeah: "Removes all or the specified class(es) from the set of matched elements."
    – da5id
    Commented Sep 15, 2009 at 3:41
  • 5
    Now it is documented properly: If no class names are specified in the parameter, all classes will be removed.
    – user
    Commented Mar 31, 2014 at 12:41
20

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

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

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();
15

Of course.

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

Remove specific classes:

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

Say if element has class="class another-class".

1
  • The last sentence seems incomprehensible. Can you fix it? Commented Aug 7, 2021 at 21:50
9

The shortest method

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

You can just try:

$(document).ready(function() {
   $('body').find('#item').removeClass();
});

If you have to access that element without a class name, for example you have to add a new class name, you can do this:

$(document).ready(function() {
   $('body').find('#item').removeClass().addClass('class-name');
});

I use that function in my project to remove and add classes in an HTML builder.

0
7

Since not all versions of jQuery are created equal, you may run into the same issue I did, which means calling $("#item").removeClass(); does not actually remove the class (probably a bug).

A more reliable method is to simply use raw JavaScript and remove the class attribute altogether.

document.getElementById("item").removeAttribute("class");
6
$('#elm').removeAttr('class');

Attribute "class" will no longer be present in "elm".

1
  • this is what worked for me. removeClass(); did not work for me.
    – kneidels
    Commented May 20, 2015 at 18:29
6

I like using native JavaScript to do this, believe it or not!

solution 1: className

  1. Remove all class of all items
const items = document.querySelectorAll('item');
for (let i = 0; i < items.length; i++) {
  items[i].className = '';
}
  1. Only remove all class of the first item
const item1 = document.querySelector('item');
item1.className = '';

solution 2: classList

// remove all class of all items
 const items = [...document.querySelectorAll('.item')];
 for (const item of items) {
   item.classList.value = '';
 }
 // remove all class of the first item
 const items = [...document.querySelectorAll('.item')];
 for (const [i, item] of items.entries()) {
   if(i === 0) {
     item.classList.value = '';
   }
 }
 // or
 const item = document.querySelector('.item');
 item.classList.value = '';

jQuery ways (not recommended)

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

  2. $("#item").removeClass("class1 ... classn");

refs

https://developer.mozilla.org/en-US/docs/Web/API/Element/className

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

0
2

Let's use this example. Maybe you want the user of your website to know a field is valid or it needs attention by changing the background color of the field. If the user hits reset then your code should only reset the fields that have data and not bother to loop through every other field on your page.

This jQuery filter will remove the class "highlightCriteria" only for the input or select fields that have this class.

$form.find('input,select').filter(function () {
    if((!!this.value) && (!!this.name)) {
        $("#"+this.id).removeClass("highlightCriteria");
    }
});
2

Try with removeClass.

For instance:

var nameClass=document.getElementsByClassName("clase1");
console.log("after", nameClass[0]);
$(".clase1").removeClass();
var nameClass=document.getElementsByClassName("clase1");
console.log("before", nameClass[0]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clase1">I am a Div with class="clase1"</div>

-2

I had a similar issue. In my case, on disabled elements was applied that aspNetDisabled class and all disabled controls had wrong colors. So, I used jQuery to remove this class on every element/control I want and everything works and looks great now.

This is my code for removing aspNetDisabled class:

$(document).ready(function () {

    $("span").removeClass("aspNetDisabled");
    $("select").removeClass("aspNetDisabled");
    $("input").removeClass("aspNetDisabled");

});
1
  • It is incomprehensible near "was applied that". Can you fix it? (But without "Edit:", "Update:", or similar - the question/answer should appear as if it was written today.) Commented Aug 7, 2021 at 21:49

Not the answer you're looking for? Browse other questions tagged or ask your own question.