DEV Community

ahoNerd
ahoNerd

Posted on • Originally published at ahonerd.com on

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');
Enter fullscreen mode Exit fullscreen mode

Remove Single class

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

document.getElementById('aho').classList.remove('bg-red');
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Contoh CSS code

.txt-red {
  color: crimson;
}

.bg-blue {
  background-color: cornflowerblue;
}
Enter fullscreen mode Exit fullscreen mode

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');
  })
}
Enter fullscreen mode Exit fullscreen mode

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');
  }
}
Enter fullscreen mode Exit fullscreen mode

Dengan Metode for...of

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

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

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.

Top comments (0)