Hapus elemen dengan id

Saat menghapus elemen dengan JavaScript standar, Anda harus pergi ke induknya terlebih dahulu:

var element = document.getElementById("element-id");
element.parentNode.removeChild(element);

Harus pergi ke simpul orangtua tampaknya agak aneh bagi saya, apakah ada alasan JavaScript berfungsi seperti ini?

Saya tahu bahwa menambah fungsi DOM asli tidak selalu merupakan solusi terbaik atau paling populer, tetapi ini berfungsi dengan baik untuk peramban modern.

Element.prototype.remove = function() {
    this.parentElement.removeChild(this);
}
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
    for(var i = this.length - 1; i >= 0; i--) {
        if(this[i] && this[i].parentElement) {
            this[i].parentElement.removeChild(this[i]);
        }
    }
}

Dan kemudian Anda dapat menghapus elemen seperti ini

document.getElementById("my-element").remove();

atau

document.getElementsByClassName("my-elements").remove();

Catatan: solusi ini tidak berfungsi untuk IE 7 dan di bawahnya. Untuk info lebih lanjut tentang memperpanjang DOM, baca artikel ini .

EDIT : Meninjau jawaban saya pada tahun 2019, node.remove()telah datang untuk menyelamatkan dan dapat digunakan sebagai berikut (tanpa polyfill di atas):

document.getElementById("my-element").remove();

atau

[...document.getElementsByClassName("my-elements")].map(n => n && n.remove());

Fungsi-fungsi ini tersedia di semua browser modern (bukan IE). Baca lebih lanjut tentang MDN .

Crossbrowser dan IE> = 11:

document.getElementById("element-id").outerHTML = "";

Anda dapat membuat suatu removefungsi sehingga Anda tidak perlu memikirkannya setiap saat:

function removeElement(id) {
    var elem = document.getElementById(id);
    return elem.parentNode.removeChild(elem);
}

Itu yang DOM dukung . Cari halaman itu untuk "hapus" atau "hapus" dan removeChild adalah satu-satunya yang menghilangkan simpul.

DOM diatur dalam pohon node, di mana setiap node memiliki nilai, bersama dengan daftar referensi ke node anaknya. Jadi, element.parentNode.removeChild(element)meniru persis apa yang terjadi secara internal: Pertama, Anda pergi ke simpul induk, kemudian hapus referensi ke simpul anak.

Pada DOM4, fungsi pembantu disediakan untuk melakukan hal yang sama: element.remove(). Ini berfungsi di 87% browser (per 2016), tetapi tidak untuk IE 11. Jika Anda perlu mendukung browser yang lebih lama, Anda dapat:

• Hapus elemen melalui simpul induk, seperti dalam pertanyaan ,
• memodifikasi fungsi DOM asli, seperti dalam jawaban Johan Dettmar , atau
• gunakan polyfill DOM4 .

Untuk menghapus satu elemen:

 var elem = document.getElementById("yourid");
 elem.parentElement.removeChild(elem);

Untuk menghapus semua elemen dengan misalnya nama kelas tertentu:

 var list = document.getElementsByClassName("yourclassname");
 for(var i = list.length - 1; 0 <= i; i--)
 if(list[i] && list[i].parentElement)
 list[i].parentElement.removeChild(list[i]);

Anda bisa menggunakannya element.remove()

The ChildNode.remove()Metode menghapus objek dari pohon itu milik.

https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

Ini biola yang menunjukkan bagaimana Anda bisa menelepon document.getElementById('my-id').remove()

https://jsfiddle.net/52kp584L/

**

Tidak perlu memperpanjang NodeList. Sudah diterapkan.

**

Anda dapat langsung menghapus elemen itu dengan menggunakan remove()metode DOM.

ini sebuah contoh:

let subsWrapper = document.getElementById("element_id");
subsWrapper.remove();
//OR directly.
document.getElementById("element_id").remove();

Menurut tingkat DOM 4 spesifikasi, yang merupakan versi saat ini dalam pengembangan, ada beberapa metode yang berguna mutasi baru yang tersedia: append(), prepend(), before(), after(), replace(), dan remove().

https://catalin.red/removing-an-element-with-plain-javascript-remove-method/

Harus pergi ke simpul orangtua tampaknya agak aneh bagi saya, apakah ada alasan JavaScript berfungsi seperti ini?

Nama fungsinya adalah removeChild(), dan bagaimana mungkin menghapus anak ketika tidak ada orang tua? :)

Di sisi lain, Anda tidak harus selalu menyebutnya seperti yang Anda tunjukkan. element.parentNodehanya penolong untuk mendapatkan simpul induk dari simpul yang diberikan. Jika Anda sudah tahu simpul induk, Anda bisa menggunakannya seperti ini:

Ex:

// Removing a specified element when knowing its parent node
var d = document.getElementById("top");
var d_nested = document.getElementById("nested");
var throwawayNode = d.removeChild(d_nested);

https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild

================================================== =======

Untuk menambahkan sesuatu yang lebih:

Beberapa jawaban menunjukkan bahwa alih-alih menggunakan parentNode.removeChild(child);, Anda dapat menggunakan elem.remove();. Tapi seperti yang saya perhatikan, ada perbedaan antara dua fungsi, dan tidak disebutkan dalam jawaban itu.

Jika Anda menggunakan removeChild(), itu akan mengembalikan referensi ke node yang dihapus.

var removedChild = element.parentNode.removeChild(element); 
console.log(removedChild); //will print the removed child.

Tetapi jika Anda menggunakan elem.remove();, itu tidak akan mengembalikan Anda referensi.

var el = document.getElementById('Example');
var removedChild = el.remove(); //undefined

https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

Perilaku ini dapat diamati di Chrome dan FF. Saya percaya ini layak diperhatikan :)

Semoga jawaban saya menambah nilai pada pertanyaan dan akan sangat membantu !!

Fungsi yang menggunakan ele.parentNode.removeChild (ele) tidak akan berfungsi untuk elemen yang Anda buat tetapi belum dimasukkan ke dalam HTML. Perpustakaan seperti jQuery dan Prototype dengan bijak menggunakan metode seperti berikut untuk menghindari batasan itu.

_limbo = document.createElement('div');
function deleteElement(ele){
    _limbo.appendChild(ele);
    _limbo.removeChild(ele);
}

Saya pikir JavaScript berfungsi seperti itu karena desainer asli DOM mengadakan navigasi induk / anak dan sebelumnya / berikutnya sebagai prioritas yang lebih tinggi daripada modifikasi DHTML yang sangat populer saat ini. Mampu membaca dari satu <input type = 'text'> dan menulis ke yang lain dengan lokasi relatif di DOM berguna pada pertengahan 90-an, masa ketika generasi dinamis dari seluruh bentuk HTML atau elemen GUI interaktif nyaris tidak ada dalam binar mata beberapa pengembang.

Harus pergi ke simpul orangtua tampaknya agak aneh bagi saya, apakah ada alasan JavaScript berfungsi seperti ini?

IMHO: Alasannya sama dengan yang saya lihat di lingkungan lain: Anda melakukan tindakan berdasarkan "tautan" Anda ke sesuatu. Anda tidak dapat menghapusnya saat Anda ditautkan ke dalamnya.

Seperti memotong dahan pohon. Duduklah di sisi terdekat dengan pohon sambil memotong atau hasilnya akan ... disayangkan (walaupun lucu).

Yang ini sebenarnya berasal dari FireFox ... untuk sekali, IE berada di depan paket dan memungkinkan penghapusan elemen secara langsung.

Ini hanya asumsi saya, tapi saya percaya alasan Anda harus menghapus anak melalui orang tua adalah karena masalah dengan cara FireFox menangani referensi.

Jika Anda memanggil objek untuk melakukan hari-kari secara langsung, maka segera setelah itu mati, Anda masih memegang referensi itu untuk itu. Ini memiliki potensi untuk membuat beberapa bug jahat ... seperti gagal menghapusnya, menghapusnya tetapi menyimpan referensi untuknya yang tampak valid, atau sekadar kebocoran memori.

Saya percaya bahwa ketika mereka menyadari masalah ini, pekerjaan di sekitar adalah menghapus elemen melalui induknya karena ketika elemen tersebut hilang, Anda sekarang hanya memegang referensi ke induknya. Ini akan menghentikan semua ketidaknyamanan itu, dan (jika menutup simpul pohon dengan simpul, misalnya) akan 'zip-up' dengan lebih baik.

Itu seharusnya bug yang mudah diperbaiki, tetapi seperti banyak hal lain dalam pemrograman web, rilisnya mungkin tergesa-gesa, mengarah ke ini ... dan pada saat versi berikutnya muncul, cukup banyak orang yang menggunakannya untuk mengubah ini akan menyebabkan untuk memecahkan banyak kode.

Sekali lagi, semua ini hanyalah dugaan saya.

Namun, saya menantikan hari ketika pemrograman web akhirnya mendapatkan pembersihan penuh musim semi, semua keanehan kecil aneh ini dibersihkan, dan semua orang mulai bermain dengan aturan yang sama.

Mungkin sehari setelah pelayan robot saya menuntut saya untuk upah kembali.

Dari apa yang saya mengerti, menghapus node secara langsung tidak berfungsi di Firefox, hanya Internet Explorer. Jadi, untuk mendukung Firefox, Anda harus pergi ke induk untuk menghapus anak itu.

Ref: http://chiragrdarji.wordpress.com/2007/03/16/removedelete-element-from-page-using-javascript-working-in-firefoxieopera/

// http://javascript.crockford.com/memory/leak.html
// cleans dom element to prevent memory leaks
function domPurge(d) {
    var a = d.attributes, i, l, n;
    if (a) {
        for (i = a.length - 1; i >= 0; i -= 1) {
            n = a[i].name;
            if (typeof d[n] === 'function') {
                d[n] = null;
            }
        }
    }
    a = d.childNodes;
    if (a) {
        l = a.length;
        for (i = 0; i < l; i += 1) {
            domPurge(d.childNodes[i]);
       }
    }
}

function domRemove(id) {
    var elem = document.getElementById(id);
    domPurge(elem);
    return elem.parentNode.removeChild(elem);
}

Ini adalah fungsi terbaik untuk menghapus elemen tanpa kesalahan skrip:

function Remove(EId)
{
    return(EObj=document.getElementById(EId))?EObj.parentNode.removeChild(EObj):false;
}

Catatan untuk EObj=document.getElementById(EId).

Ini adalah SATU tanda sama dengan tidak ==.

jika elemen EIdada maka fungsi menghapusnya, jika tidak mengembalikan false, bukan error.