Bagaimana untuk Mengeluarkan Elemen DOM dengan ID dalam JavaScript dengan Cekap?

Cara Mengalih Keluar Elemen dengan IDnya Menggunakan Native JavaScript

Dalam JavaScript standard, mengalih keluar elemen daripada DOM memerlukan mengakses nod induknya pertama:

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

Pendekatan ini kelihatan agak berbelit-belit, menimbulkan persoalan: mengapa JavaScript direka ini cara?

Penyelesaian: Memperluaskan Fungsi DOM

Walaupun mengubah suai fungsi DOM asli tidak selalunya ideal, polyfill berikut berfungsi dengan lancar dalam penyemak imbas moden:

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

Dengan polyfill ini, anda boleh mengalih keluar elemen dengan mudah:

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

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

Nota: Penyelesaian ini tidak berfungsi dalam IE 7 dan ke bawah.

Penyelesaian Moden: Node.remove()

Dalam pelayar terkini, fungsi node.remove() boleh digunakan tanpa polyfill:

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

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

Fungsi ini disokong oleh semua penyemak imbas moden, tidak termasuk IE. Untuk butiran lanjut, rujuk dokumentasi MDN.

Atas ialah kandungan terperinci Bagaimana untuk Mengeluarkan Elemen DOM dengan ID dalam JavaScript dengan Cekap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!