Add and Remove Multiple Classes to an Element using javaScript

Untuk menambahkan dan menghilangkan beberapa class pada sebuah HTML element dengan menggunakan javaScript, kita cukup menggunakan metode classList.add() dan classList.remove() seperti biasa. Metode add() dan remove() di sini dapat menerima satu atau lebih parameter dalam hal ini nama class.

Add and Remove Single class

Berikut ini contoh menambahkan dan menghilangkan satu class pada HTML element:

Add Single class

Diasumsikan kita akan menambahkan class .bg-red pada element dengan id #aho

document.getElementById('aho').classList.add('bg-red');

Remove Single class

Diasumsikan kita akan menghilangkan class .bg-red dari element dengan id #aho

document.getElementById('aho').classList.remove('bg-red');

CodePen

Add and Remove Multiple classes

Berikut ini contoh menambahkan dan menghilangkan beberapa class pada HTML element:

Add Multiple classes

Diasumsikan kita akan menambahkan class .txt-red dan .bg-blue pada element dengan id #aho

document.getElementById('aho').classList.add('txt-red', 'bg-blue');

Remove Multiple classes

Diasumsikan kita akan menghilangkan class .txt-red dan .bg-blue dari element dengan id #aho

document.getElementById('aho').classList.remove('txt-red', 'bg-blue');

CodePen

Adding and Removing classes in Multiple elements

Untuk menambahkan dan menghilangkan beberapa class di beberapa HTML element kita dapat melakukannya dengan looping atau iterasi pada setiap element.

Contoh HTML code

<div id="demo">
  <div class="aho">coba 1</div>
  <div class="aho">coba 2</div>
  <div class="aho">coba 3</div>
  <div>
    <button onClick="add()">add</button>
    <button onClick="remove()">remove</button>
  </div>
</div>

Contoh CSS code

.txt-red {
  color: crimson;
}

.bg-blue {
  background-color: cornflowerblue;
}

Contoh JS code

Pada contoh berikut, kita menggunakan metode document.querySelectorAll untuk memilih semua element di DOM yang memiliki class .aho, kemudian kita menggunakan array.forEach untuk melakukan iterasi dari setiap element.

const aho = document.querySelectorAll('.aho');

function add() {
  aho.forEach((elm) => {
    elm.classList.add('txt-red', 'bg-blue');
  })
}

function remove() {
  aho.forEach((elm) => {
    elm.classList.remove('txt-red', 'bg-blue');
  })
}

Selain menggunakan array.forEach seperti pada contoh di atas, kita juga dapat menggunakan metode looping yang lainnya seperti for loop atau for...of.

Dengan Metode for

const aho = document.querySelectorAll('.aho');

function add() {
  for (let index = 0; index < aho.length; index++) {
    const elm = aho[index];
    elm.classList.add('txt-red', 'bg-blue');
  }
}

Dengan Metode for...of

const aho = document.querySelectorAll('.aho');

function add() {
  for (const elm of aho) {
    elm.classList.add('txt-red', 'bg-blue');
  }
}

CodePen

Conclusion

Dengan metode classList.add() dan classList.remove() kita dapat menambahkan atau menghilangkan satu atau lebih class. Akan tetapi metode ini akan mengasilkan error apabila parameter berupa string kosong atau string yang mengandung spasi.