Removing multiple classes (jQuery)
JqueryCssJquery Problem Overview
Is there any better way to rewrite this:
$('element').removeClass('class1').removeClass('class2');
I cannot use removeClass();
as it would remove ALL classes, which I don't want.
Jquery Solutions
Solution 1 - Jquery
$("element").removeClass("class1 class2");
From removeClass()
, the class parameter:
> One or more CSS classes to remove from > the elements, these are separated by > spaces.
Solution 2 - Jquery
$('element').removeClass('class1 class2');
Here are the docs.
Solution 3 - Jquery
jQuery .removeClass()
documentation.
One or more CSS classes to remove from the elements, these are separated by spaces.
Solution 4 - Jquery
The documentation says:
> class (Optional) String
One or more CSS classes to remove from the elements, these are separated by spaces.
Example:
> Remove the class 'blue' and 'under' from the matched elements.
>
> $("p:odd").removeClass("blue under");
Solution 5 - Jquery
There are many ways can do that!
jQuery
-
remove all class
$("element").removeClass();
OR
$("#item").removeAttr('class');
OR
$("#item").attr('class', '');
OR
$('#item')[0].className = '';
-
remove multi class
$("element").removeClass("class1 ... classn");
OR
$("element").removeClass("class1").removeClass("...").removeClass("classn");
Vanilla Javascript
- remove all class
// remove all items all class
const items = document.querySelectorAll('item');
for (let i = 0; i < items.length; i++) {
items[i].className = '';
}
- remove multi class
// only remove all class of first item
const item1 = document.querySelector('item');
item1.className = '';
Solution 6 - Jquery
Separate classes by white space
$('element').removeClass('class1 class2');
Solution 7 - Jquery
Since jQuery 3.3.0, it is possible to pass arrays to .addClass()
, .removeClass()
and toggleClass()
, which makes it easier if there is any logic which determines which classes should be added or removed, as you don't need to mess around with the space-delimited strings.
$("div").removeClass(["class1", "class2"]);
Solution 8 - Jquery
You must be separate those classes which you want to remove by white space$('selector').removeClass('class1 class2');