Papërshtatshmëria e Klasave në JavaScript

Le të supozojmë se kemi disa klasa për stilizimin e mesazheve:

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

Le të supozojmë se në një element kemi shfaqur një mesazh suksesi dhe i kemi caktuar klasën përkatëse për sukses:

javascriptelem.classList.add('success');

Le të supozojmë se tani në të njëjtin element kemi shfaqur një mesazh gabimi dhe i kemi caktuar klasën përkatëse për gabim:

javascriptelem.classList.add('error');

Si rezultat, do të ndodhë që në element do të ketë dy klasa që kundërshtojnë njëra-tjetrën:

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

Rezulton se para shtimit të një klase të re, na duhet fillimisht të heqim klasën e mëparshme:

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

Kjo nuk është shumë e përshtatshme, pasi ne mund të mos e dimë saktësisht se cila ishte klasa e mëparshme dhe do të na duhet të heqim të gjitha klasat njëra pas tjetrës:

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