Obekvämligheten med klasser i JavaScript

Låt oss säga att vi har flera klasser för att styla meddelanden:

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

Låt oss säga att vi i ett visst element har visat ett framgångsrikt meddelande och tilldelat det motsvarande klass för framgång:

javascriptelem.classList.add('success');

Låt oss nu säga att vi i samma element visar ett felmeddelande och tilldelar det motsvarande klass för fel:

javascriptelem.classList.add('error');

Som ett resultat kommer elementet att ha två klasser som konflikterar med varandra:

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

Det visar sig att innan vi lägger till en ny klass måste vi först ta bort den föregående:

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

Detta är inte särskilt bekvämt, eftersom vi kanske inte vet exakt vilken klass som var den föregående, och vi måste ta bort alla klasser i följd:

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