Queryselectorall Remove Class Javascript

Queryselectorall Remove Class Javascript

3 min read Jun 20, 2024
Queryselectorall Remove Class Javascript

Menghapus Class dengan querySelectorAll dan JavaScript

Dalam pengembangan web, sering kali kita perlu memanipulasi elemen HTML, termasuk menghapus kelas yang diterapkan pada elemen tersebut. querySelectorAll adalah metode JavaScript yang memungkinkan kita untuk memilih beberapa elemen HTML berdasarkan selektor CSS.

Berikut adalah panduan langkah demi langkah tentang cara menghapus kelas menggunakan querySelectorAll dan JavaScript:

1. Mendapatkan Elemen HTML

Pertama, kita perlu menggunakan querySelectorAll untuk memilih elemen HTML yang ingin kita ubah kelasnya.

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

Kode di atas akan memilih semua elemen HTML yang memiliki kelas my-class.

2. Menghapus Kelas

Setelah kita mendapatkan elemen yang ingin diubah, kita bisa menghapus kelas dengan menggunakan metode classList.remove().

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

Kode di atas akan mengulangi setiap elemen dalam elements dan menghapus kelas my-class dari setiap elemen.

Contoh:

Berikut adalah contoh lengkap penggunaan querySelectorAll untuk menghapus kelas:




Contoh Menghapus Kelas



  
Div 1
Div 2
Div 3

Dalam contoh ini, kita memiliki tiga elemen <div> dengan kelas my-class dan active. Ketika tombol "Hapus Kelas Aktif" diklik, fungsi removeActiveClass akan dijalankan. Fungsi ini akan memilih semua elemen dengan kelas active, kemudian menghapus kelas active dari setiap elemen tersebut.

Kesimpulan:

querySelectorAll adalah alat yang kuat untuk memanipulasi elemen HTML dalam JavaScript. Dengan menggabungkan querySelectorAll dengan metode classList.remove(), kita dapat dengan mudah menghapus kelas dari beberapa elemen HTML.

Related Post