tutorial mudah menghapus element html dengan jquery

Hai teman-teman semuanya, apa kabar? semoga tetap dalam keadaan sehat, kita lanjut lagi belajarnya, kali ini kita akan belajar tentang salah satu method pada jquery yang saya akan praktekan pada tutorial kali ini yaitu menghapus element html dengan jquery.

Didalam jquery ada beberapa method yang berfungsi untuk menghapus element html salah satunya adalah method empty() pada jquery, method ini berfungsi untuk menghapus atau mengosongkan isi element hmtl yang kita jadikan selector, untuk lebih jelasnya silahakan teman-teman buat sebuah file dan ketikan script berikut ini:

<!DOCTYPE html>
<html>
<head>

<style>
	#kotak{width:300px; padding:10px; background:#ccc;height:300px;}
</style>

</head>
<body>

<div id="kotak">
<p>It is a long established fact that a reader will be distracted
 by the readable content of a page when looking at its layout. The point of using 
Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 
'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors
 now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their
 infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like)</p>
</div>


<button>Hapus</button>

</body>
</html>

Script diatas saya membuat sebuah kotak dan didalam kotak terdapat paragraf, lalu saya membuat sebuah button, jika disave lalu dijalankan pada browser maka hasilnya akan seperti berikut ini:

Sekarang kita akan atur script jquerynya silahakan teman-teman tambahkan script berikut ini:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#kotak").empty();
    });
});
</script>

jika sudah save dan Jika teman-teman jalankan pada browser dan klik tombol hapusnya maka hasilnya akan seperti berikut ini:

oke teman-teman cukup sampai sini dulu tutorial kali ini semoga bermanfaat,

terima aksih

Menghapus Element HTML Dengan Jquery

Kategori