Eliminar todas las clases excepto una

Bueno, sé que con algunas acciones de jQuery, podemos agregar muchas clases a un div en particular:

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

Digamos que con algunos clics y otras cosas, el div recibe muchas clases

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

Entonces, ¿cómo puedo eliminar todas las clases excepto una? La única idea que se me ocurrió es esto:

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

Mientras removeClass()mata a todas las clases, el div se estropea, pero agregando justo después de eso addClass('cleanstate'), vuelve a la normalidad. La otra solución es poner un atributo de ID con las propiedades CSS base para que no se eliminen, lo que también mejora el rendimiento, pero solo quiero conocer otra solución para deshacerme de todos excepto ".cleanstate"

Pregunto esto porque, en el guión real, el div sufre varios cambios de clases.

En lugar de hacerlo en 2 pasos, puede restablecer todo el valor a la vez attrsobrescribiendo todos los valores de la clase con la clase que desee:

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

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

Use attr para establecer directamente el atributo de clase en el valor específico que desea:

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

Con JavaScript antiguo simple, no JQuery:

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

A veces es necesario conservar algunas de las clases debido a la animación CSS, porque tan pronto como elimine todas las clases, es posible que la animación no funcione. En su lugar, puede conservar algunas clases y eliminar el resto de esta manera:

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

con respecto a la respuesta de robs y para completar, también puede usar querySelector con vainilla

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

¿Qué sucede si desea conservar una o más de una clase y desea clases excepto estas? Esta solución no funcionaría cuando no desee eliminar todas las clases y agregue esa clase en particular nuevamente. El uso de attr y removeClass () restablece todas las clases en primera instancia y luego adjunta esa clase particular nuevamente. Si usa alguna animación en clases que se están restableciendo nuevamente, fallará.

Si simplemente desea eliminar todas las clases excepto algunas, esto es para usted. Mi solución es para: 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;
        };

Esto no restablecerá todas las clases, solo eliminará lo necesario.
Lo necesitaba en mi proyecto donde necesitaba eliminar solo las clases que no coinciden.

Puedes usarlo $(".third").removeClassesExceptThese(["first", "second"]);