Body Remove Class Javascript

Body Remove Class Javascript

2 min read Jun 20, 2024
Body Remove Class Javascript

Cara Menghapus Class dari Element HTML dengan JavaScript

Dalam pengembangan web, seringkali kita perlu memanipulasi class dari elemen HTML secara dinamis menggunakan JavaScript. Salah satu kebutuhan yang umum adalah menghapus class dari element HTML. Berikut adalah cara untuk melakukannya:

1. Menggunakan classList.remove()

Metode classList.remove() adalah metode yang paling umum dan direkomendasikan untuk menghapus class dari elemen HTML. Metode ini menerima nama class sebagai parameter dan menghapusnya dari elemen.

Contoh:

const myElement = document.getElementById("myElement");
myElement.classList.remove("active");

Kode di atas akan menghapus class "active" dari elemen dengan id "myElement".

2. Menggunakan className

Metode ini merupakan cara alternatif untuk menghapus class dari elemen HTML. Meskipun dapat digunakan, penggunaan classList.remove() lebih disarankan karena lebih fleksibel dan menghindari penggunaan manipulasi string.

Contoh:

const myElement = document.getElementById("myElement");
let classList = myElement.className.split(" ");
const classToRemove = "active";

classList = classList.filter(className => className !== classToRemove);
myElement.className = classList.join(" ");

Kode di atas akan menghapus class "active" dari elemen dengan id "myElement".

3. Menggunakan replace

Metode ini dapat digunakan untuk menghapus class dari elemen HTML dengan mengganti seluruh string class dengan string yang baru.

Contoh:

const myElement = document.getElementById("myElement");
myElement.className = myElement.className.replace("active ", "");

Kode di atas akan menghapus class "active" dari elemen dengan id "myElement".

Kesimpulan

classList.remove() merupakan metode yang paling direkomendasikan untuk menghapus class dari elemen HTML karena mudah digunakan dan efisien. Penting untuk memilih metode yang paling sesuai dengan kebutuhan proyek Anda.

Related Post