Ongemak van classes in JavaScript

Stel we hebben enkele classes voor het stylen van berichten:

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

Stel dat we in een bepaald element een succesbericht hebben getoond en er de bijbehorende class voor succes aan hebben toegekend:

javascriptelem.classList.add('success');

Stel dat we nu in hetzelfde element een foutmelding tonen en er de bijbehorende class voor een fout aan toekennen:

javascriptelem.classList.add('error');

Het resultaat is dat het element twee met elkaar conflicterende classes zal hebben:

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

Blijkbaar moeten we, voordat we een nieuwe class toevoegen, eerst de vorige verwijderen:

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

Dit is niet erg handig, omdat we misschien niet weten welke precies de vorige class was en we dan alle classes achter elkaar moeten verwijderen:

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