Η Ανεμπόδιστη Χρήση των Κλάσεων στο JavaScript

Ας υποθέσουμε ότι έχουμε πολλές κλάσεις για το στυλ των μηνυμάτων:

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

Ας υποθέσουμε ότι σε ένα συγκεκριμένο στοιχείο εμφανίσαμε ένα επιτυχημένο μήνυμα και του αναθέσαμε την αντίστοιχη κλάση για επιτυχία:

javascriptelem.classList.add('success');

Ας υποθέσουμε τώρα ότι στο ίδιο στοιχείο εμφανίσαμε ένα μήνυμα σφάλματος και του αναθέσαμε την αντίστοιχη κλάση για σφάλμα:

javascriptelem.classList.add('error');

Ως αποτέλεσμα, θα προκύψει ότι στο στοιχείο θα υπάρχουν δύο κλάσεις που αλληλοσυγκρούονται μεταξύ τους:

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

Αποδεικνύεται ότι πριν προσθέσουμε τη νέα κλάση, θα πρέπει πρώτα να αφαιρέσουμε την προηγούμενη:

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

Αυτό δεν είναι πολύ βολικό, καθώς μπορεί να μην γνωρίζουμε ακριβώς ποια ήταν η προηγούμενη κλάση και θα πρέπει να αφαιρέσουμε όλες τις κλάσεις η μία μετά την άλλη:

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