Bagaimanakah Saya Boleh Mengeluarkan Elemen dengan Cekap mengikut ID dalam JavaScript?

Pengalihan Keluar Elemen mengikut ID dalam JavaScript: Alternatif yang Mudah

Dalam JavaScript, kaedah standard untuk mengalih keluar elemen memerlukan merentasi sehingga nod induknya:

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

Pendekatan ini memerlukan langkah tambahan untuk mengakses ibu bapa, yang boleh menjadi tidak cekap. Artikel ini meneroka alternatif yang memudahkan penyingkiran elemen dengan menambahkan kaedah alih keluar pada prototaip Elemen.

Dengan melanjutkan prototaip Element dan NodeList, anda boleh memperkenalkan kaedah alih keluar kepada semua elemen dan koleksi HTML:

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 tambahan ini, anda kini boleh mengalih keluar elemen secara langsung:

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

Atau untuk berbilang elemen:

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

Nota: Penyelesaian ini tidak disokong oleh IE 7 dan ke bawah.

Kemas kini (2019): Node.js telah memperkenalkan fungsi node.remove(), menjadikan penyingkiran elemen lebih mudah:

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

Atau untuk koleksi:

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

Pendekatan yang dikemas kini ini disokong secara meluas oleh penyemak imbas moden, termasuk Chrome, Firefox, Edge dan Safari.

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