Removing multiple classes (jQuery)

JqueryCss

Jquery 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

  1. remove all class
    $("element").removeClass();
    OR
    $("#item").removeAttr('class');
    OR
    $("#item").attr('class', '');
    OR
    $('#item')[0].className = '';

  2. remove multi class
    $("element").removeClass("class1 ... classn");
    OR
    $("element").removeClass("class1").removeClass("...").removeClass("classn");

Vanilla Javascript

  1. remove all class

// remove all items all class  
const items = document.querySelectorAll('item');
for (let i = 0; i < items.length; i++) {
    items[i].className = '';
}

  1. 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');

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestioneozzyView Question on Stackoverflow
Solution 1 - JquerycletusView Answer on Stackoverflow
Solution 2 - JqueryScott EverndenView Answer on Stackoverflow
Solution 3 - JquerySeanJAView Answer on Stackoverflow
Solution 4 - JquerydecezeView Answer on Stackoverflow
Solution 5 - JqueryxgqfrmsView Answer on Stackoverflow
Solution 6 - JquerycodemirrorView Answer on Stackoverflow
Solution 7 - JqueryMark FisherView Answer on Stackoverflow
Solution 8 - JqueryAvishek MondalView Answer on Stackoverflow