Ketidaknyamanan Kelas dalam JavaScript

Misalkan kita memiliki beberapa kelas untuk menata pesan:

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

Misalkan dalam suatu elemen kita menampilkan pesan sukses dan menetapkan kelas yang sesuai untuk sukses:

elem.classList.add('success');

Misalkan sekarang dalam elemen yang sama kita menampilkan pesan kesalahan dan menetapkan kelas yang sesuai untuk kesalahan:

elem.classList.add('error');

Hasilnya, elemen tersebut akan memiliki dua kelas yang saling berkonflik:

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

Ternyata, sebelum menambahkan kelas baru, kita harus menghapus terlebih dahulu kelas sebelumnya:

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

Ini kurang nyaman, karena kita mungkin tidak tahu persis kelas sebelumnya mana dan kita harus menghapus semua kelas satu per satu:

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

Diberikan sebuah input. Saat kehilangan fokus, periksa, apakah yang dimasukkan ke dalamnya tidak lebih dari 9 karakter. Jika ya, warnai border input menjadi hijau, dan jika tidak - menjadi merah.