Menghapus Elemen - Elemen HTML dengan Javascript

Jumat, 14 Oktober 2016 22:18 Jhoel Rocher - Website

Sobat postikel, kali ini kita akan membahas Menghapus Elemen - Elemen HTML dengan Javascript dengan mudah tanpa perlu reload atau loading halaman penuh. Sebagai contohnya kamu bisa cek halaman beranda facebook, ketika kita menghapus komentar atau status di beranda maka kotak komentarnya menghilang tanpa memuat ulang halaman situs. Nah itulah contoh yang akan kita buat melalui artikel ini.

Kasus untuk artikel kali ini yaitu kita akan menghapus elemen-elemen html menggunakan kode javascript. Di sini tentunya kita mempunyai beberapa elemen atau lebih dari satu elemen yang masing-masing elemen mempunyai tombol hapus.

Gambar berikut ini sebuah contoh elemen div pada html yang akan di hapus tanpa meload halaman website biar website kita lebih komunikatif.

button delete

Solusinya kita bisa memberi class yang sama untuk masing-masing elemen div. Berikut berikut contoh format htmlnya :

    <div class="nama-class">
        <span class="btn-close">Hapus 1</span>
        <p>Konten satu.</p>
    </div>
    <div class="nama-class">
        <span class="btn-close">Hapus 2</span>
        <p>Konten dua.</p>
    </div>
    <div class="nama-class">
        <span class="btn-close">Hapus 3</span>
        <p>Konten tiga.</p>
    </div>

Perhatikan skrip di atas. Ada tiga elemen div yang mempunyai class yang sama yaitu "nama-class" yang akan kita buatkan fungsi deletenya dengan javascript.

Kita bisa menggunakan fungsi each untuk mendeklarasikan masing-masing class tersebut dan mencari class "btn-close" jika terklik. Berikut kodenya :

<script src="https://www.postikel.com/plugins/jQuery/jquery.js"></script> 
<script type="text/javascript">
    (function($){
        $('.nama-class').each(function(){
            var elem = $(this);
            var btn = $(this).find('.btn-close');
            btn.click(function(){
                // lakukan hapus
                elem.remove();
            });
         });
    })(jQuery);
</script>

Biar code jalan, harus di sertai framework jquery seperti kode di atas pada baris pertama, atau pada halaman simpan aja setelah taq <head> atau yang penting sebelum kode program yang kita buat.

Sekian dulu tutornya moga bisa membantu dan salam.


Bagikan Artikel

Baca Juga
Belum ada komentar! Jadilah yang pertama berkomentar di sini.

Tambah Komentar

Terbaru

Populer

Komentar