Selamat malam sobat darsitek, kali ini kita akan membahas mengenai Cara Menghapus Elemen – Elemen HTML dengan Javascript dengan mudah tanpa perlu me-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 terapkan melalui artikel ini.
Studi kasus untuk artikel kali ini yaitu kita akan menghapus elemen-elemen html menggunakan kode javascript. Disini 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 agar blog atau website kita lebih komunikatif.
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>
Konten satu.
</div>
<div class="nama-class">
<span class="btn-close">Hapus 2</span>
Konten dua.
</div>
<div class="nama-class">
<span class="btn-close">Hapus 3</span>
Konten tiga.
</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=<span class="hljs-string">"https://www.postikel.com/plugins/jQuery/jquery.js"</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-title">script</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript"> (<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">($)</span>{</span> $(<span class="hljs-string">'.nama-class'</span>).each(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span> <span class="hljs-keyword">var</span> elem = $(<span class="hljs-keyword">this</span>); <span class="hljs-keyword">var</span> btn = $(<span class="hljs-keyword">this</span>).find(<span class="hljs-string">'.btn-close'</span>); btn.click(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span> <span class="hljs-comment">// lakukan hapus</span> elem.remove(); }); }); })(jQuery); </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></span>
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 tutorial kali ini semoga bisa bermanfaat untuk sobat dan jika sobat rasa artikel ini berguna, silahkan share ke yang lain agar sobat lainnya bisa mengetahuinya juga, terimakasih.
