Pertanyaan Hapus elemen menurut 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 node induk pertama tampaknya agak aneh bagi saya, apakah ada alasan JavaScript berfungsi seperti ini?


905
2017-08-01 18:47


asal


Jawaban:


Saya tahu bahwa menambah fungsi DOM asli tidak selalu merupakan solusi terbaik atau paling populer, tetapi ini berfungsi dengan baik untuk browser 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 bawah. Untuk info lebih lanjut tentang memperpanjang DOM, baca ini artikel.


500
2017-08-08 07:56



Crossbrowser dan IE> = 11:

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

197
2017-10-10 14:28



Anda bisa membuat remove berfungsi sehingga Anda tidak perlu memikirkannya setiap saat:

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

130
2017-08-02 19:58



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


92
2017-08-01 23:16



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

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


73
2017-12-30 17:41



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]);

33
2017-08-05 08:08



Anda bisa menggunakan element.remove()


19
2018-02-28 16:17



Itu ChildNode.remove() metode menghilangkan objek dari pohon itu milik.

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

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

https://jsfiddle.net/52kp584L/

**

Tidak perlu memperpanjang NodeList. Sudah dilaksanakan.

**


11
2017-07-28 18:26



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 keterbatasan itu.

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

Saya pikir JavaScript berfungsi seperti itu karena desainer asli DOM memiliki 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 tahun 90an, waktu ketika pembentukan dinamis seluruh formulir HTML atau elemen GUI interaktif nyaris tidak bersinar di mata beberapa pengembang.


6
2017-12-19 06:06