Menghapus Konten dengan jQuery

jQuery menyediakan beberapa metode seperti empty(), remove(), unwrap(), dll untuk menghapus elemen HTML atau konten yang ada di dokumen HTML.


Metode empty()

Metode empty() dapat kita gunakan untuk menghapus semua elemen turunan (Child) serta elemen turunan lainnya dan konten teks di dalam elemen yang dipilih dari DOM.

Contoh berikut berfungsi untuk menghapus semua konten yang ada di dalam elemen yang memiliki class .container ketika tombol di klik:

<script>
    $(document).ready(function(){
        // Empty elemen container
        $("button").click(function(){
            $(".container").empty();
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Catatan: Menurut spesifikasi DOM W3C (World Wide Web Consortium), setiap string teks yang ada di dalam suatu elemen dianggap sebagai Child Node dari elemen tersebut.

Metode remove()

Metode remove() dapat kita gunakan untuk menghapus elemen yang dipilih dari DOM serta semua yang ada di dalamnya. Selain elemen itu sendiri, semua Event akan terikat dan data dari jQuery yang terkait dengan elemen tersebut akan dihapus.

Contoh berikut berfungsi untuk menghapus semua elemen <p> yang memiliki class .hint ketika tombol di klik. Elemen bersarang (Nested) yang ada di dalam paragraf tersebut juga akan dihapus:

<script>
    $(document).ready(function(){
        // Menghapus paragraf dengan clas .hint dari DOM
        $("button").click(function(){
            $("p.hint").remove();
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Metode remove() juga dapat menyertakan Selector sebagai parameter opsional yang dapat kita gunakan untuk memfilter elemen yang akan dihapus. Misalnya, contoh kode sebelumnya dapat ditulis ulang sebagai berikut:

<script>
    $(document).ready(function(){
        // Menghapus paragraf dengan clas .hint dari DOM
        $("button").click(function(){
            $("p").remove(".hint");
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Catatan: Kalian juga bisa menyertakan ekspresi Selector sebagai parameter ke dalam metode remove() seperti remove(".hint, .demo") untuk memfilter beberapa elemen.

Metode unwrap()

Metode unwrap() dapat kita gunakan untuk menghapus elemen induk (Parent) dari elemen yang dipilih dari DOM. Metode unwrap() adalah kebalikan dari metode wrap().

Contoh berikut berfungsi untuk menghapus elemen induk (Parent) dari elemen <p> ketika tombol di klik:

<script>
    $(document).ready(function(){
        // Menghapus elemen parent dari paragraf
        $("button").click(function(){
            $("p").unwrap();
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Metode removeAttr()

Metode removeAttr() berfungsi untuk menghapus atribut dari elemen yang dipilih.

Contoh di bawah ini berfungsi untuk menghapus atribut href dari elemen <a> ketika tombol di klik:

<script>
    $(document).ready(function(){
        // Menghapus atribut href
        $("button").click(function(){
            $("a").removeAttr("href");
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Tulis Komentar

0 Komentar