Remova todas as classes, exceto uma

Bem, eu sei que com algumas ações jQuery, podemos adicionar muitas classes a um div específico:

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

Digamos que, com alguns cliques e outras coisas, o div receba muitas classes

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

Então, como posso remover todas as classes, exceto uma? A única ideia que tive é esta:

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

Enquanto removeClass()mata todas as classes, o div se confunde, mas somando logo depois addClass('cleanstate')volta ao normal. A outra solução é colocar um atributo ID com as propriedades CSS básicas para que não sejam excluídas, o que também melhora o desempenho, mas eu só quero saber outra solução para me livrar de todos, exceto ".cleanstate"

Estou perguntando isso porque, no script real, a div sofre várias mudanças de classes.

Em vez de fazer isso em 2 etapas, você pode simplesmente redefinir o valor inteiro de uma vez attr, substituindo todos os valores da classe pela classe desejada:

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

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

Use attr para definir diretamente o atributo class para o valor específico que você deseja:

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

Com JavaScript simples e não JQuery:

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

Às vezes você precisa manter algumas das classes devido à animação CSS, porque assim que você remove todas as classes, a animação pode não funcionar. Em vez disso, você pode manter algumas classes e remover o resto assim:

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

em relação à resposta de robs e para fins de integridade, você também pode usar o querySelector com vanilla

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

E se você quiser manter uma ou mais aulas e quiser aulas exceto essas. Essa solução não funcionaria onde você não deseja remover todas as classes e adicionar essa classe perticular novamente. Usar attr e removeClass () redefine todas as classes na primeira instância e, em seguida, anexa essa classe perticular novamente. Se você usar alguma animação em classes que estão sendo redefinidas novamente, ela falhará.

Se você deseja simplesmente remover todas as classes, exceto algumas classes, isso é para você. Minha solução é 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;
        };

Isso não irá redefinir todas as classes, apenas removerá o necessário.
Eu precisava disso no meu projeto onde eu precisava remover apenas classes não correspondentes.

Você pode usar isso $(".third").removeClassesExceptThese(["first", "second"]);