Inconveniența claselor în JavaScript

Să presupunem că avem mai multe clase pentru stilizarea mesajelor:

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

Să presupunem că într-un anumit element am afișat un mesaj de succes și i-am atribuit clasa corespunzătoare pentru succes:

javascriptelem.classList.add('success');

Să presupunem că acum în același element am afișat un mesaj de eroare și i-am atribuit clasa corespunzătoare pentru eroare:

javascriptelem.classList.add('error');

Ca urmare, se va dovedi că în element vor fi două clase care intră în conflict una cu cealaltă:

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

Se dovedește că, înainte de a adăuga o nouă clasă, va trebui mai întâi să eliminăm clasa anterioară:

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

Acest lucru nu este foarte convenabil, deoarece este posibil să nu știm care a fost exact clasa anterioară și va trebui să eliminăm toate clasele una după alta:

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