Usumbufu wa Madarasa katika JavaScript

Wacha tuwe na madarasa kadhaa ya mitindo ya ujumbe:

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

Wacha katika kipengele fulani tumeonyesha ujumbe wa mafanikio na tukampeana darasa linalofanana kwa mafanikio:

javascriptelem.classList.add('success');

Wacha sasa katika kipengele hiki hiki tumeonyesha ujumbe wa hitilafu na tukampeana darasa linalofanana kwa hitilafu:

javascriptelem.classList.add('error');

Kama matokeo, itatokea kwamba kipengele kitakuwa na madarasa mawili yanayopingana:

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

Inabadilika kuwa kabla ya kuongeza darasa jipya, tutalazimika kwanza kuondoa la awali:

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

Hii si rahisi sana, kwani sisi huenda tusijue ni darasa gani hasa lilikuwepo na tutalazimika kuondoa madarasa yote mfululizo:

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