Die ongemaklikheid van klasse in JavaScript

Gestel ons het verskeie klasse vir die stilering van boodskappe:

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

Gestel ons het 'n suksesvolle boodskap in 'n element uitgestuur en dit die ooreenstemmende suksesklas toegeken:

javascriptelem.classList.add('success');

Gestel ons het nou 'n foutboodskap in dieselfde element uitgestuur en dit die ooreenstemmende foutklas toegeken:

javascriptelem.classList.add('error');

Die gevolg sal wees dat die element twee klasse sal hê wat met mekaar bots:

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

Dit beteken dat ons voor die byvoeging van 'n nuwe klas, eers die vorige een moet verwyder:

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

Dit is nie baie gerieflik nie, aangesien ons dalk nie weet watter spesifieke klas voorheen was nie, en ons sal alle klasse een vir een moet verwyder:

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