Cara Menghapus Class Menggunakan Javascript

Sebelumnya kita telah membahas tentang bagaimana Cara Menambahkan Class Menggunakan Javascript. Pada kasus kali ini saya masih menggunakan elemen classList tapi dengan metode berbeda yaitu metode remove(). Metode remove ini berfungsi untuk menghapus class pada elemen yang kita inginkan. Di Tutorial kali ini saya akan membahas tentang Cara Menghapus Class Menggunakan Javascript.

Bagaimana kita menghapus suatu class menggunakan javascript? Nah, karena ada elemen classList yang berisikan metode remove() maka saya akan mencoba memberikan langkah-langkah Cara Menghapus Class Menggunakan Javascript. Berikut adalah studi kasus dimana kita akan menghapus class box pada elemen img:

– Pertama teman-teman buat folder image yang di satukan dengan tempat kita akan menyimpan index.html.

– Kedua kita ketikan tag html di bawah ini:

<!DOCTYPE html>
<html>
<head>
<title>addClass</title>
<style type="text/css">
.box{
  border:5px solid grey;
}
</style>
</head>
<body>

<img src="images/cat.jpg" class="contoh box">
<img src="images/cat.jpg" class="contoh box"><!-- elemen yang akan kita hilangkan class box nya -->

<button id="btn">Click!</button>


</body>
</html>

Keterangan sudah berada dalam commenting di tag html di atas. Coba teman-teman jalankan di browser teman-teman, maka akan tampil seperti gambar di bawah ini:

– Kedua, teman-teman tuliskan kode javascript di bawah tag button, dan berikut kodenya:

var  element = document.getElementById("btn");
var images = document.querySelectorAll(".contoh");
element.onclick = function(){
	images[1].classList.remove("box");
}
</script>

Penjelasan kode javascript di atas:

– variabel element: berfungsi untuk mengambil id dari button untuk proses onclick.

– variabel images : untuk remove(“box”): berfungsi untuk memilih paragraf mana yang akan kita hilangkan class box-nya. karena kita hanya memiliki dua elemen maka elemen 1 atau img ke-dua lah yang akan kita hapus class.

setelah selesai mengetikan kode javascript di atas, coba teman-teman refresh file html yang ada di browser tadi lalu klik buttonnya, maka elemen 1 atau gambar ke dua akan hilang bordernya:

Bagaimana teman-teman cukup mudahkan Menghapus Class Menggunakan Javascript. Dengan java script kita bisa dengan mudah menghapus class pada elemen yang kita inginkan.

Sekian tutorial kali ini tentang Cara Menghapus Class Menggunakan Javascript. Selamat mencoba teman-teman.