Cara Menghapus Kelas CSS dari Elemen di JavaScript

Menghapus kelas CSS dari elemen dipakai untuk menonaktifkan status, seperti menghilangkan tanda “aktif” atau menutup pesan error. Artikel ini membahas cara menghapus kelas CSS di JavaScript.

Metode classList.remove()

<script>
const el = document.getElementById("kotak");
el.classList.remove("aktif");
</script>

Bila kelas yang dihapus tidak ada, JavaScript tidak menghasilkan error, sehingga aman dipanggil kapan saja.

Contoh Kasus: Menghilangkan Pesan Error saat Mengetik

<script>
const input = document.getElementById("email");
input.addEventListener("input", function() {
    input.classList.remove("error"); // hapus tanda merah saat mulai memperbaiki
});
</script>

Menghapus dari Banyak Elemen Sekaligus

<script>
document.querySelectorAll(".tab").forEach(t => t.classList.remove("aktif"));
</script>

Pola ini umum dipakai sebelum menandai satu tab baru sebagai aktif.

Kesimpulan

Gunakan classList.remove() untuk menghapus kelas dengan aman. Padukan dengan querySelectorAll().forEach() untuk membersihkan status dari banyak elemen sekaligus, seperti pada sistem tab.

Referensi: untuk penjelasan lebih mendalam, kunjungi dokumentasi resmi JavaScript (MDN).

Baca Juga

Ali Akbar

Software Developer yang fokus mengembangkan aplikasi berbasis Web dan Desktop. Senang mempelajari teknologi baru terutama di bidang web design dan web development.

View all posts by Ali Akbar →

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *