Cara menggunakan item hapus javascript

Bagaimana kita menghapus kelas menggunakan javascript? . Berikut adalah studi kasus dimana kita akan menghapus class box pada elemen img

Table of Contents Show

Tambah -- Menambahkan Elemen atau Konten
Hapus -- Menghapus Elemen atau Konten
Sintaks HTML
Sintaks Javascript

- Pertama-tama teman-teman buat folder gambar yang digabungkan dengan tempat kita akan menyimpan indeks. html

- Kedua, kita ketikkan 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>

Penjelasannya sudah ada di komentar di tag html diatas. Coba jalankan di browser anda, maka akan muncul seperti gambar di bawah ini

- Kedua sobat tulis 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

– elemen variabel. berfungsi untuk mengambil id dari tombol untuk proses onclick

– gambar variabel. untuk menghapus ("kotak"). berfungsi untuk memilih paragraf mana yang akan kita hilangkan class boxnya. karena kita hanya memiliki dua elemen, maka elemen pertama atau img kedua adalah yang akan kita hapus kelasnya

setelah selesai mengetik kode javascript diatas sobat coba refresh file html di browser dan klik tombol maka elemen 1 atau gambar kedua akan hilang bordernya

Bagaimana kalian membuatnya mudah untuk menghapus kelas menggunakan Javascript. Dengan java script kita dapat dengan mudah menghapus class pada elemen yang kita inginkan

Sekian tutorial kali ini tentang Cara Menghapus Kelas Menggunakan Javascript. Semoga berhasil teman-teman

Kali ini saya akan menjelaskan cara menggunakan JQuery Add Element/Content dan Remove Element/Content. Pertama-tama kita harus metode yang digunakan untuk menambah dan menghapus elemen atau konten dalam HTML

Tambah -- Menambahkan Elemen atau Konten

append() - Menyisipkan elemen/konten di akhir elemen yang dipilih
prepend() - Menyisipkan elemen/konten pada awalan elemen yang dipilih
after() - Menyisipkan elemen/konten setelah elemen yang dipilih
before() - Menyisipkan elemen/konten sebelum elemen yang dipilih

Hapus -- Menghapus Elemen atau Konten

remove() - Menghapus elemen yang dipilih beserta elemen anaknya (elemen anak)
kosong() - Kosongkan elemen anak(elemen anak) dari elemen yang dipilih

Contoh JQuery Tambahkan

Contoh Hapus JQuery

Bekerja pada Pertanyaan

Kirim

Tes di sini

Buah
- Oranye
- apel
- Anggur
- Semangka
Hewan
- Kucing
- Lembu
- Kambing
- Anjing
- Domba

Sintaks HTML

Sintaks Javascript

Halo teman-teman program, Alhamdulillah saya masih dikaruniai kesehatan dan umur panjang dan masih bisa bertemu dengan Rizal lagi di website dumetschool. Dibahas kali ini kita akan bermain dengan javascript DOM yaitu tentang Cara Menghapus Elemen DOM Menggunakan Javascript

DOM adalah singkatan dari Document Object Model, DOM ini dibutuhkan oleh javascript untuk mengubah atau memanipulasi tampilan sebuah website (dokumen html). Dan kali ini kita akan mencoba salah satu metode DOM dari javascript yaitu Cara Menghapus Elemen DOM menggunakan Javascript

Di sini kita akan menggunakan Metode HTML DOM removeChild() yang disediakan oleh javascript yang berfungsi atau bertujuan untuk menghapus elemen. Untuk lebih jelasnya mari kita coba praktekkan teman-teman

Langkah pertama jalankan text-editor lalu ketikkan kode HTML seperti pada contoh di bawah ini

HTML

< / div>

Pada kode di atas, saya membuat kelas container sebagai induk dan kelas box1, box2, dan box3 sebagai anak. Oke kalau sudah langkah selanjutnya sob tambahkan style css seperti pada contoh dibawah ini

CSS

#wadah {lebar. 300px; . mobil; . Abu-abu muda; . tersembunyi; . 50px;}

. kotak1 {lebar. 100px; tinggi. 100px; latar belakang. merah; float. kiri;}

. kotak2 {lebar. 100px; tinggi. 100px; latar belakang. hijau; float. kiri;}

. kotak3 {lebar. 100px; tinggi. 100px; latar belakang. biru; melayang. kiri;}

masukan[ketik = "kirim"]{posisi. tetap; atas. 175 piksel; kiri. 648 piksel;}

Jika sudah silahkan jalankan maka hasil dari HTML dan CSS diatas akan seperti pada contoh dibawah ini

Apakah seperti gambar di atas?

Javascript

fungsi Fungsiku() {

var induk = dokumen.getElementById("wadah");

induk. removeChild(induk. anak terakhir);

}

Kode diatas dimana ketika tombol di klik saya arahkan ke parent lalu saya gunakan fungsi removechild dan saya pilih last child atau lastChild yang akan dihapus terlebih dahulu

Dan jika sudah dijalankan maka hasilnya akan seperti pada contoh di bawah ini

Nah itulah contoh sederhana dari pembahasan kita kali ini tentang Cara Menghapus Elemen DOM Menggunakan Javascript. Semoga bermanfaat bagi teman-teman dan sampai jumpa di pembahasan selanjutnya