A JavaScript osztályok kényelmetlensége

Tegyük fel, hogy van néhány osztályunk üzenetek stílusozásához:

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

Tegyük fel, hogy egy elemben sikeres üzenetet jelenítünk meg, és hozzárendeljük neki a sikeres állapotnak megfelelő osztályt:

javascriptelem.classList.add('success');

Tegyük fel, hogy most ugyanebben az elemben hibaüzenetet jelenítünk meg, és hozzárendeljük neki a hibának megfelelő osztályt:

javascriptelem.classList.add('error');

Ennek eredményeképpen az elemben két egymással konfliktusban lévő osztály lesz:

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

Kiderül, hogy az új osztály hozzáadása előtt először el kell távolítanunk az előzőt:

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

Ez nem túl kényelmes, mivel lehet, hogy nem tudjuk, pontosan melyik volt az előző osztály, és egymás után kell eltávolítanunk minden lehetséges osztályt:

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