Foreach Remove Class Javascript

Foreach Remove Class Javascript

2 min read Jun 20, 2024
Foreach Remove Class Javascript

Cara Menghapus Class dengan forEach di JavaScript

forEach adalah method JavaScript yang berguna untuk iterasi melalui setiap elemen dalam sebuah array. Kita bisa menggunakannya untuk memanipulasi elemen-elemen tersebut, termasuk menghapus class yang terpasang.

Berikut adalah cara menghapus class dengan forEach di JavaScript:

1. Mendapatkan Elemen

Pertama, kita perlu mendapatkan elemen yang ingin kita manipulasi. Kita bisa melakukannya dengan menggunakan document.querySelectorAll untuk memilih elemen berdasarkan selector CSS.

const elements = document.querySelectorAll('.my-class');

Kode ini akan memilih semua elemen dengan class my-class dan menyimpannya dalam variabel elements.

2. Menghapus Class dengan forEach

Setelah kita mendapatkan elemen yang ingin kita manipulasi, kita bisa menggunakan forEach untuk mengiterasi melalui setiap elemen dan menghapus class yang diinginkan.

elements.forEach(element => {
  element.classList.remove('my-class');
});

Kode ini akan mengiterasi melalui setiap elemen dalam elements dan menjalankan function classList.remove untuk menghapus class my-class dari setiap elemen.

Contoh

Berikut adalah contoh lengkap untuk menghapus class my-class dari semua elemen yang memiliki class tersebut:

const elements = document.querySelectorAll('.my-class');

elements.forEach(element => {
  element.classList.remove('my-class');
});

Catatan:

  • classList.remove akan menghapus class yang ditentukan, bahkan jika class tersebut tidak terpasang pada elemen.
  • Anda bisa menggunakan classList.contains untuk memeriksa apakah class sudah terpasang pada elemen sebelum menghapusnya.

Kesimpulan

Dengan menggunakan forEach, Anda dapat dengan mudah menghapus class dari banyak elemen dalam JavaScript. Ini adalah teknik yang berguna untuk memanipulasi style dan perilaku elemen di halaman web.

Related Post