ความไม่สะดวกของคลาสใน 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');