Cara Menghapus Class Menggunakan Javascript
Sebelumnya kita telah membahas mengenai bagaimana Cara Menambahkan Class Menggunakan Javascript. Di kasus kali ini saya masih menggunakan faktor classList tapi dengan sistem berbeda yaitu sistem remove(). Sistem remove ini berfungsi bagi menghapus class di faktor yang kita inginkan. Di Panduan kali ini saya akan membahas mengenai Cara Menghapus Class Menggunakan Javascript.
Bagaimana kita menghapus suatu class menggunakan javascript? Nah, karena ada faktor classList yang berisikan sistem remove() karenanya saya akan mencoba memberikan strategi Cara Menghapus Class Menggunakan Javascript. Berikut ialah studi kasus dimana kita akan menghapus class box di faktor img:
– Pertama-tama teman-teman bikin 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><!-- faktor yang akan kita hilangkan class box nya -->
<button id=btn>Click!</button>
</body>
</html>
Keterangan telah berada pada commenting di tag html di atas. Coba teman-teman jalankan di browser teman-teman, karenanya 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 bagi mengambil id dari button bagi proses onclick.
– variabel images : bagi remove(“box”): berfungsi bagi memilih paragraf mana yang akan kita hilangkan class box-nya. karena kita hanya mempunyai dua faktor karenanya faktor 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 terdapat di browser tadi lalu klik buttonnya, karenanya faktor 1 atau gambar ke dua akan hilang bordernya:
Bagaimana teman-teman lumayan mudahkan Menghapus Class Menggunakan Javascript. Dengan java script kita dapat dengan gampang menghapus class di faktor yang kita inginkan.
Demikian panduan kali ini mengenai Cara Menghapus Class Menggunakan Javascript. Selamat mencoba teman-teman.
Sumber https://kursuswebsite.org
