Hallo sobat program, Alhamdulillah masih diberikan nikmat sehat wal’afiat serta panjang umur dan masih dapat bertemu kembali dengan saya Rizal di website dumetschool. Dipembahasan kali ini kita akan bermain dengan DOM javascript yaitu tentang Cara Menghapus Element DOM Menggunakan Javascript.

DOM merupakan singkatan dari Document Object Model, DOM ini diperlukan oleh javascript untuk merubah atau memanipulasi tampilan website (document html). Dan kali ini kita akan mencoba salah satu DOM method dari javascript yaitu Cara Menghapus Element DOM menggunakan Javascript.

Disini kita akan menggunakan HTML DOM removeChild() Method yang disediakan oleh javascript dimana berfungsi atau bertujuan untuk Menghapus element. Untuk lebih jelasnya mari kita coba praktekan ya teman-teman.

Langkah pertama jalankan/run text-editornya kemudian ketiklah kode HTML nya seperti pada contoh dibawah ini :

Pada kode diatas saya membuat sebuah class container sebagai parent (induk) dan class kotak1,kotak2,kotak3 sebagai child (anak). Oke jika sudah langkah selanjutnya teman-teman tambahkan style CSS nya seperti pada contoh dibawah ini :

Jika sudah, silahkan teman-teman jalankan maka hasil dari HTML dan CSS diatas akan menjadi seperti pada contoh dibawah ini :

Cara Menghapus Element DOM Menggunakan Javascript

Sudah seperti gambar diatas ? oke langkah terakhir teman-teman tambahkan kode javascriptnya seperti pada contoh dibawah ini :

Kode diatas dimana saat tombol di klik maka saya menunjuk parentnya lalu saya gunakan fungsi removechild dan saya pilih anak terakhir atau lastChild yang akan diremove terlebih dahulu.

Dan jika sudah silahkan dijalankan maka hasilnya akan seperti pada contoh dibawah ini :

Cara Menghapus Element DOM Menggunakan Javascript

Jadi seperti itulah contoh sederhana dari pembahasan kita kali ini tentang Cara Menghapus Element DOM menggunakan Javascript. Semoga dapat bermanfaat buat teman-teman dan sampai bertemu dipembahasan selanjutnya.

Terimakasih