Mengapa Pembuangan Elemen JavaScript Sangat Rumit, dan Bagaimana Ia Boleh Dipermudahkan?

Memudahkan Pembuangan Elemen dalam JavaScript

Kaedah JavaScript untuk mengalih keluar elemen, yang melibatkan mencari nod induk dan kemudian mengalih keluar elemen secara manual, nampaknya menyusahkan. Ini menimbulkan persoalan: mengapa JavaScript direka bentuk dengan cara ini?

Walaupun mungkin terdapat sebab teknikal, satu penyelesaian adalah untuk menambah fungsi DOM asli. Pendekatan ini tidak sesuai untuk semua kes, tetapi ia berfungsi dengan baik dalam pelayar moden.

Kaedah Polyfill

Menggunakan kod berikut, anda boleh melanjutkan prototaip Element dan NodeList untuk memasukkan kaedah alih keluar:

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 sambungan ini, mengalih keluar elemen menjadi semudah sebagai:

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

Atau:

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

Walaupun penyelesaian ini berfungsi dengan berkesan dalam pelayar moden, ia tidak menyokong Internet Explorer 7 dan ke bawah.

Penyelesaian Pelayar Moden

Nasib baik, pelayar moden (tidak termasuk IE) telah memperkenalkan fungsi node.remove(). Fungsi ini membolehkan anda mengalih keluar elemen secara langsung, tanpa memerlukan polyfill.

Untuk menggunakan node.remove():

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

Atau:

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

Pendekatan ini disokong dalam semua penyemak imbas utama, termasuk Chrome, Firefox, Edge dan Safari.

Atas ialah kandungan terperinci Mengapa Pembuangan Elemen JavaScript Sangat Rumit, dan Bagaimana Ia Boleh Dipermudahkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!