Supprimer toutes les classes sauf une

Question

Je sais qu'avec certaines actions jQuery, on peut ajouter beaucoup de classes à un div particulier :

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

Disons qu'avec quelques clics et d'autres choses, le div obtient beaucoup de classes

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

Alors, comment puis-je supprimer toutes les classes sauf une ? La seule idée que j'ai trouvée est la suivante :

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

Alors que removeClass() tue toutes les classes, le div est foutu, mais en ajoutant juste après ça addClass('cleanstate') il revient à la normale. L'autre solution est de mettre un attribut ID avec les propriétés CSS de base afin qu'elles ne soient pas supprimées, ce qui améliore également les performances, mais je veux juste connaître une autre solution pour se débarrasser de tout sauf ".cleanstate".

Je pose cette question parce que, dans le vrai script, le div subit divers changements de classes.

Answer 1

Au lieu de le faire en 2 étapes, vous pourriez simplement réinitialiser la valeur entière en une seule fois avec attr en écrasant toutes les valeurs de la classe avec la classe que vous voulez :

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

Un échantillon : http://jsfiddle.net/jtmKK/1/

Answer 2

Utilisez attr pour définir directement l'attribut de classe à la valeur spécifique que vous souhaitez :

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

Answer 3

Avec le bon vieux JavaScript, pas JQuery :

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

Answer 4

Parfois, vous devez conserver certaines des classes en raison de l'animation CSS, car dès que vous supprimez toutes les classes, l'animation risque de ne pas fonctionner. Au lieu de cela, vous pouvez conserver certaines classes et supprimer le reste comme ceci :

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

Answer 5

En ce qui concerne la réponse de robs et par souci d'exhaustivité, vous pouvez également utiliser querySelector avec vanilla

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