Ketika menghapus sebuah elemen dengan standar JavaScript, anda harus pergi ke induknya pertama:
var element = document.getElementById("element-id");
element.parentNode.removeChild(element);
Harus pergi ke simpul orang tua pertama tampaknya sedikit aneh bagi saya, apakah ada alasan JavaScript bekerja seperti ini?
Saya tahu bahwa augmenting asli DOM fungsi isn't selalu yang terbaik atau yang paling populer solusi, tapi ini bekerja 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 doesn't bekerja untuk IE 7 dan di bawah ini. Untuk info lebih lanjut tentang memperpanjang DOM baca ini artikel.
EDIT: Meninjau jawaban saya di 2019, node.hapus()
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 (IE). Baca lebih lanjut di MDN.
Crossbrowser dan IE >= 11:
document.getElementById("element-id").outerHTML = "";
Anda bisa membuat menghapus
fungsi sehingga anda tidak't harus berpikir tentang hal itu setiap waktu:
function removeElement(id) {
var elem = document.getElementById(id);
return elem.parentNode.removeChild(elem);
}
It's apa DOM mendukung. Pencarian halaman untuk "hapus" atau "hapus" dan removeChild adalah satu-satunya yang menghapus node.
DOM ini diselenggarakan di sebuah pohon dari simpul, dimana masing-masing node memiliki nilai, bersama dengan daftar referensi ke node anak. Jadi elemen.parentNode.removeChild(elemen)
meniru apa yang terjadi secara internal: Pertama, anda pergi ke simpul orangtua, kemudian menghapus referensi ke node anak.
Sebagai DOM4, fungsi pembantu disediakan untuk melakukan hal yang sama: elemen.hapus()
. Ini bekerja di 87% dari browser (pada 2016), tetapi tidak IE 11. Jika anda perlu mendukung browser lama, anda dapat:
Untuk menghapus salah satu elemen:
var elem = document.getElementById("yourid");
elem.parentElement.removeChild(elem);
Untuk menghapus semua elemen dengan misalnya kelas tertentu nama:
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]);
The ChildNode.hapus()
metode menghapus objek dari pohon itu milik.
https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove
Berikut ini adalah biola yang menunjukkan bagaimana anda dapat memanggil dokumen.getElementById('saya-id').hapus()
**
**
Memiliki untuk pergi ke simpul orang tua pertama tampaknya sedikit aneh bagi saya, apakah ada alasan JavaScript bekerja seperti ini?
Nama fungsi adalah removeChild()
, dan bagaimana mungkin untuk menghapus anak ketika ada's tidak ada orang tua? :)
Di sisi lain, anda tidak selalu harus menyebutnya seperti yang anda telah menunjukkan. elemen.akhirnya
hanya seorang pembantu untuk mendapatkan parent node dari node tertentu. Jika anda sudah tahu simpul orang tua, anda hanya dapat 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 telah menunjukkan bahwa alih-alih menggunakan parentNode.removeChild(anak);
, anda dapat menggunakan elem.hapus();
. Tapi seperti yang saya perhatikan, ada perbedaan antara dua fungsi, dan's tidak disebutkan dalam jawaban itu.
Jika anda menggunakan removeChild()
, itu akan mengembalikan referensi ke node dihapus.
var removedChild = element.parentNode.removeChild(element);
console.log(removedChild); //will print the removed child.
Tetapi jika anda menggunakan elem.hapus();
, itu tidak't kembali memberikan 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 Itu's yang layak diperhatikan :)
Semoga jawaban saya menambahkan beberapa nilai untuk pertanyaan dan akan membantu!!!!
Fungsi-fungsi yang menggunakan ele.parentNode.removeChild(ele) tidak't bekerja untuk elemen anda've dibuat tetapi belum dimasukkan ke dalam HTML. Library seperti jQuery dan Prototype bijak menggunakan metode seperti berikut ini untuk menghindari keterbatasan itu.
_limbo = document.createElement('div');
function deleteElement(ele){
_limbo.appendChild(ele);
_limbo.removeChild(ele);
}
Saya pikir JavaScript bekerja seperti itu karena DOM's desainer asli dilaksanakan orang tua/anak dan sebelumnya/berikutnya navigasi sebagai prioritas yang lebih tinggi daripada DHTML modifikasi yang begitu populer saat ini. Mampu membaca dari satu <input type='text'> dan menulis ke yang lain dengan lokasi yang relatif dalam DOM berguna pada pertengahan tahun 90-an, saat generasi dinamis dari seluruh bentuk HTML atau GUI yang interaktif elemen hampir tidak binar di beberapa pengembang's eye.
Menurut DOM level 4 spesifikasi, yang merupakan versi saat ini dalam pengembangan, ada beberapa baru berguna mutasi metode yang tersedia: append()
, prepend()
, sebelum()
, setelah()
, ganti()
, dan hapus()
.
https://catalin.red/removing-an-element-with-plain-javascript-remove-method/
Anda dapat langsung menghapus elemen dengan menggunakan hapus()
metode DOM.
berikut ini's contoh:
let subsWrapper = document.getElementById("element_id");
subsWrapper.remove();
//OR directly.
document.getElementById("element_id").remove();
Memiliki untuk pergi ke simpul orang tua pertama tampaknya sedikit aneh bagi saya, apakah ada alasan JavaScript bekerja seperti ini?
IMHO: alasan untuk ini adalah sama seperti saya've terlihat di lingkungan lainnya: Anda akan melakukan suatu tindakan berdasarkan "link" untuk sesuatu. Anda dapat't menghapusnya saat anda're terkait dengan hal itu.
Seperti memotong dahan pohon. Duduk di sisi paling dekat dengan pohon sambil memotong atau hasilnya akan ... malang (meskipun lucu).
Yang satu ini benar-benar datang dari FireFox... sekali saja, YAITU di depan pak dan memungkinkan penghapusan sebuah elemen ini diatas.
Ini hanya asumsi saya, tapi saya percaya alasan bahwa anda harus memindahkan anak melalui orang tua adalah karena masalah dengan cara FireFox ditangani referensi.
Jika anda memanggil sebuah objek untuk bunuh diri secara langsung, maka segera setelah itu mati, anda masih memegang bahwa referensi untuk itu. Ini memiliki potensi untuk membuat beberapa bug jahat... seperti gagal untuk menghapus itu, menghapus, tapi menjaga referensi untuk itu yang muncul sah, atau hanya kebocoran memori.
Saya percaya bahwa ketika mereka menyadari masalah ini, yang bekerja di sekitar ini adalah untuk menghapus sebuah elemen melalui induknya karena ketika elemen pergi, anda sekarang hanya memegang referensi ke orang tua. Ini akan menghentikan semua ketidaknyamanan, dan (jika penutupan bawah pohon node dengan node, misalnya) akan 'zip-up' agak baik.
Itu harus mudah diperbaiki bug, tapi seperti banyak hal lain dalam pemrograman web, itu mungkin terburu-buru, yang mengarah ke ini... dan pada saat versi berikutnya datang sekitar, cukup banyak orang yang menggunakan itu bahwa perubahan ini akan menyebabkan melanggar banyak kode.
Sekali lagi, semua ini hanya dugaan saya.
Aku, bagaimanapun, berharap untuk hari ketika pemrograman web akhirnya mendapat penuh pembersihan musim semi, semua ini sedikit aneh idiosynchracies membersihkan diri, dan semua orang mulai bermain dengan aturan yang sama.
Mungkin hari setelah saya robot pelayan menggugat saya untuk kembali upah.
Dari apa yang saya mengerti, menghapus suatu node secara langsung tidak bekerja di Firefox, hanya Internet Explorer. Jadi, untuk mendukung Firefox, anda harus pergi ke orang tua untuk menghapusnya's anak.
// 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 untuk menghapus sebuah elemen tanpa galat skrip:
function Remove(EId)
{
return(EObj=document.getElementById(EId))?EObj.parentNode.removeChild(EObj):false;
}
Catatan untuk EObj=dokumen.getElementById(Idul fitri)
.
Ini adalah salah SATU tanda sama dengan tidak ==
.
jika elemen Idul fitri
yang ada maka fungsi menghilangkan itu, jika ia mengembalikan false, bukan kesalahan
.