Add and Remove Multiple Classes to an Element using javaScript
Tags: dom, howto, javascript
Published: 2022-11-24 07:35:56

---
title: Add and Remove Multiple Classes to an Element using javaScript
published: true
date: 2022-10-08 00:00:00 UTC
tags: DOM,HowTo,javaScript
canonical_url: https://ahonerd.com/js-add-remove-multiple-classes-to-an-element
---

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`

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

### Remove Single class

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

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

### CodePen

{% codepen https://codepen.io/ahonerd/pen/poVYmdp %}

## 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`

```js
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`

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

### CodePen

{% codepen https://codepen.io/ahonerd/pen/BaxbeGR %}

## 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

```html
<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

```css
.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.

```js
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`

```js
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`

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

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

### CodePen

{% codepen https://codepen.io/ahonerd/pen/vYjPqeZ %}

## 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.