L'inconveniente delle classi in JavaScript

Supponiamo di avere diverse classi per stilizzare i messaggi:

css.success {
  color: green;
}
.warning {
  color: orange;
}
.error {
  color: red;
}

Supponiamo che in un elemento abbiamo visualizzato un messaggio di successo e gli abbiamo assegnato la classe corrispondente per il successo:

javascriptelem.classList.add('success');

Ora supponiamo che nello stesso elemento visualizziamo un messaggio di errore e assegniamo ad esso la classe corrispondente per l'errore:

javascriptelem.classList.add('error');

Il risultato sarà che l'elemento avrà due classi in conflitto tra loro:

html<div id="elem" class="success error">
  text
</div>

Ciò significa che prima di aggiungere una nuova classe, dovremo prima rimuovere quella precedente:

javascriptelem.classList.remove('success');
elem.classList.add('error');

Questo non è molto conveniente, poiché potremmo non sapere quale fosse esattamente la classe precedente e dovremo rimuovere tutte le classi una dopo l'altra:

javascriptelem.classList.remove('success');
elem.classList.remove('warning');
elem.classList.add('error');