Remove all classes except one

Question

Well, I know that with some jQuery actions, we can add a lot of classes to a particular div:

<div class="cleanstate"></div>

Let's say that with some clicks and other things, the div gets a lot of classes

<div class="cleanstate bgred paddingleft allcaptions ..."></div>

So, how I can remove all the classes except one? The only idea I have come up is with this:

$('#container div.cleanstate').removeClass().addClass('cleanstate');

While removeClass() kills all the classes, the div get screwed up, but adding just after that addClass('cleanstate') it goes back to normal. The other solution is to put an ID attribute with the base CSS properties so they don't get deleted, what also improves performance, but i just want to know another solution to get rid of all except ".cleanstate"

I'm asking this because, in the real script, the div suffers various changes of classes.

Pastiche

Get classes, split them with " " (space) and decide for each one whether or not to delete it? – Rubadub

Answer 1

Instead of doing it in 2 steps, you could just reset the entire value at once with attr by overwriting all of the class values with the class you want:

jQuery('#container div.cleanstate').attr('class', 'cleanstate');

Sample: http://jsfiddle.net/jtmKK/1/

Plaque

Answer 2

Use attr to directly set the class attribute to the specific value you want:

$('#container div.cleanstate').attr('class','cleanstate');

Dayfly

Answer 3

With plain old JavaScript, not JQuery:

document.getElementById("container").className = "cleanstate";

Urbannal

Answer 4

Sometimes you need to keep some of the classes due to CSS animation, because as soon as you remove all classes, animation may not work. Instead, you can keep some classes and remove the rest like this:

$('#container div.cleanstate').removeClass('removethis removethat').addClass('cleanstate');

Francefrancene

I like the answer to remove some classes. I think the code could be $('#container div.cleanstate').removeClass('removethis removethat').addClass('cleanstate');. I tried to edit, but once again stackoverflow doesn't let you be helpful. – Kenn

Answer 5

regarding to robs answer and for and for the sake of completeness you can also use querySelector with vanilla

document.querySelector('#container div.cleanstate').className = "cleanstate";

Flocculus

Answer 6

What if if you want to keep one or more than one classes and want classes except these. These solution would not work where you don't want to remove all classes add that perticular class again. Using attr and removeClass() resets all classes in first instance and then attach that perticular class again. If you using some animation on classes which are being reset again, it will fail.

If you want to simply remove all classes except some class then this is for you. My solution is for: removeAllExceptThese

Array.prototype.diff = function(a) {
            return this.filter(function(i) {return a.indexOf(i) < 0;});
        };
$.fn.removeClassesExceptThese = function(classList) { 
/* pass mutliple class name in array like ["first", "second"] */
            var $elem = $(this);

            if($elem.length > 0) {
                var existingClassList = $elem.attr("class").split(' ');
                var classListToRemove = existingClassList.diff(classList);
                $elem
                    .removeClass(classListToRemove.join(" "))
                    .addClass(classList.join(" "));
            }
            return $elem;
        };

This will not reset all classes, it will remove only necessary.
I needed it in my project where I needed to remove only not matching classes.

You can use it $(".third").removeClassesExceptThese(["first", "second"]);

Scandian