Cara menggunakan remove html
Tutorial Belajar jQuery Part 11: Cara Menghapus Elemen HTML dengan jQuery 30 Mar 16 | | Tutorial jQuery | | Setelah memahami cara mengambil, mengubah dan menambah element HTML dengan jQuery, dalam tutorial belajar jQuery Duniailkom kali ini kita akan membahas Cara Menghapus Elemen HTML menggunakan method remove() dan empty(). Menghapus Elemen HTML dengan method remove() jQueryKita bisa menggunakan method remove() jQuery untuk menghapus element HTML yang sudah tampil di halaman saat ini. Method remove() akan menghapus tag saat ini, beserta seluruh isinya. Langsung saja kita lihat contoh cara menghapus element HTML dengan method remove() jQuery:
Anda bisa mencobanya sendiri dari link codepen dibawah ini: See the Pen Cara Menghapus Elemen HTML dengan method remove() jQuery by duniailkom (@duniailkom) on CodePen.10206 Ketika tombol Hapus HTML di klik, perintah: $(“#list_html”).remove() akan dijalankan. Akibatnya, list Bagaimana dengan tombol Hapus Semua!? Tombol ini akan menjalankan perintah $(“#belajar”).remove(). Elemen HTML yang memiliki id=”belajar” adalah tag Menghapus Elemen HTML dengan Method empty() jQuerySelain menggunakan method remove(), jQuery juga menyediakan method empty() untuk menghapus sebuah element HTML. Apa perbedaannya? Method empty() hanya menghapus isi dari sebuah element, sedangkan element itu sendiri tidak ikut dihapus. Hal ini berbeda dengan method remove() yang menghapus isi element beserta element itu sendiri. Untuk melihat contoh penggunaan method empty(), perhatikan kode program dibawah ini:
See the Pen Cara Menghapus Elemen HTML dengan method empty() jQuery by duniailkom (@duniailkom) on CodePen.10206 Kali ini saya memodifikasi sedikit kode program sebelumnya. Sekarang terdapat 3 tombol. Tombol pertama: Tambah jQuery akan menjalankan perintah: $("#belajar").append(" Artinya, ketika tombol ini di-klik, akan menambah sebuah elemen baru di bagian bawah list. Method append() sudah kita pelajari di dalam Tutorial Belajar jQuery: Cara Menambah Elemen HTML baru dengan jQuery. Tombol kedua: Kosongkan akan menjalankan perintah: $("#belajar").empty(); Artinya, seluruh isi list akan dihapus. Tetapi tag Akan tetapi, ketika tombol Hapus Semua di klik, perintah yang dijalankan adalah: $("#belajar").remove(); Perintah ini akan menghapus seluruh list, beserta tag Dengan pemahaman tentang cara mengambil, mengubah, menambah dan menghapus element, kita sudah bisa melakukan banyak hal dengan jQuery. Berikutnya, saya akan membahas cara mengambil dan mengubah atribut element HTML. |