Nepohodlie tried v JavaScripte

Majme niekoľko tried pre štýlovanie správ:

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

Predpokladajme, že v nejakom prvku sme zobrazili úspešnú správu a pridali sme mu príslušnú triedu pre úspech:

javascriptelem.classList.add('success');

Teraz predpokladajme, že v tom istom prvku sme zobrazili chybovú správu a pridali sme mu príslušnú triedu pre chybu:

javascriptelem.classList.add('error');

Výsledkom bude, že prvok bude mať dve vzájomne konfliktné triedy:

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

Vychádza nám, že pred pridaním novej triedy musíme najprv odstrániť predchádzajúcu:

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

To nie je veľmi pohodlné, pretože my môžeme nevedieť, ktorá konkrétne bola predchádzajúca trieda a budeme musieť odstraňovať všetky triedy jeden po druhom:

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