Perbedaan Remove dan Empty pada Jquery

Jquery adalah salah satu framework javascript yang sering digunakan oleh para web developer. Fungsi jquery salah satunya adalah dapat mengolah html dengan secara langsung, yang artinya perubahan yang dilakukan oleh jquery langsung pada saat itu juga. Tanpa perlu mereload halaman, perubahan yang terjadi langsung bisa terlihat hasillnya. Pada jquery banyak sekali fungsi yang dapat kita gunakan dalam membangun website yang interaktif. Salah satunya yang akan kita bahas adalah mengenai perbedaan remove dan empty pada jquery.

Remove dan empty adalah salah satu fungsi yang ada pada jquery. Kegunaam kedua fungsi tersebut adalah untuk menghapus. Namun jika menggunakan fungsi remove, yang dihapus adalah objek berserta isi kontenya. Sedangkan empty yang dihapus adalah kontenya saja. Agar lebih mudah pemahamanya baiknya kita langsung saja mempraktekanya, kalian bisa ikuti contoh code berikut ini.

remove.html

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").remove();
    });
});
</script>
</head>
<body>

<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">

Ini adalah paragraf.
<p>Ini adalah paragraf 2.</p>
<p>Ini adalah paragraf 3.</p>

</div>
<br>

<button>Remove div element</button>

</body>
</html>

Setelah sudah kalian simpan file tersebut dan lihat hasilnya pada browser kalian. Maka yang akan terjadi adalah seperti ini.

perbedaan-remove-dan-empty-pada-jquery-rangga1-130817

Setelah klik tombol

perbedaan-remove-dan-empty-pada-jquery-rangga2-130817

Sekarang kita coba untuk fungsi empty seperti contoh code berikut ini.

empty.html

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").empty();
    });
});
</script>
</head>
<body>

<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">

Ini adalah paragraf.
<p>Ini adalah paragraf 2.</p>
<p>Ini adalah paragraf 3.</p>

</div>
<br>

<button>Empty div element</button>

</body>
</html>

Simpan file tersebut lalu coba jalankan dibrowser kalian, maka hasilnya akan seperti ini.

perbedaan-remove-dan-empty-pada-jquery-rangga3-130817

Setelah klik tombol

perbedaan-remove-dan-empty-pada-jquery-rangga4-130817

Terlihat jelas perbedaan remove dan empty, sehingga kalian bisa sesuaikan penggunaan fungsi tersebut untuk website kalian dengan tingkat kerumitan yang berbeda pula. Mudah bukan ?

Sekian pembahasan mengenai perbedaan remove dan empty pada Jquery. Semoga bermanfaat dan menjadi inspirasi bagi kalian semua. Sampai jumpa pada artikel menarik dan tidak kalah serunya pada lainya.

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

Your email address will not be published. Required fields are marked *