Unbequemlichkeit von Klassen in JavaScript

Nehmen wir an, wir haben mehrere Klassen zur Gestaltung von Nachrichten:

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

Nehmen wir an, wir haben in einem Element eine Erfolgsmeldung ausgegeben und ihm die entsprechende Klasse für Erfolg zugewiesen:

elem.classList.add('success');

Nehmen wir nun an, wir geben in diesem selben Element eine Fehlermeldung aus und weisen ihm die entsprechende Klasse für Fehler zu:

elem.classList.add('error');

Das Ergebnis wird sein, dass das Element zwei miteinander in Konflikt stehende Klassen haben wird:

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

Es stellt sich heraus, dass wir vor dem Hinzufügen der neuen Klasse zuerst die vorherige entfernen müssen:

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

Das ist nicht sehr praktisch, da wir vielleicht nicht wissen, welche genau die vorherige Klasse war, und wir müssten alle Klassen der Reihe nach entfernen:

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

Gegeben ist ein Input. Prüfen Sie beim Verlust des Fokus, ob nicht mehr als 9 Zeichen eingegeben wurden. Wenn ja, färben Sie den Rand des Inputs grün, andernfalls rot.