Bagaimana cara saya menghapus semua elemen turunan dari simpul DOM dalam JavaScript?

Katakanlah saya memiliki HTML (jelek) berikut:

<p id="foo">
    <span>hello</span>
    <div>world</div>
</p>

Dan saya ambil simpul yang saya inginkan seperti ini:

var myNode = document.getElementById("foo");

Bagaimana saya bisa menghapus anak-anak foosehingga hanya <p id="foo"></p>tersisa?

Bisakah saya lakukan:

myNode.childNodes = new Array();

atau haruskah saya menggunakan kombinasi removeElement?

Saya ingin jawabannya langsung DOM; meskipun poin tambahan jika Anda juga memberikan jawaban di jQuery bersama dengan jawaban DOM-only.

Opsi 1 A: Kliring innerHTML.

• Pendekatan ini sederhana, tetapi mungkin tidak cocok untuk aplikasi berkinerja tinggi karena memanggil parser HTML browser (meskipun browser dapat mengoptimalkan untuk kasus di mana nilai adalah string kosong).

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  myNode.innerHTML = '';
}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <span>Hello</span>
</div>
<button id='doFoo'>Remove via innerHTML</button>

Opsi 1 B: Kliring textContent

• Seperti di atas, tetapi gunakan .textContent. Menurut MDN, ini akan lebih cepat daripada innerHTMLbrowser tidak akan memanggil parser HTML mereka dan sebagai gantinya akan segera mengganti semua anak elemen dengan satu #textnode.

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  myNode.textContent = '';
}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <span>Hello</span>
</div>
<button id='doFoo'>Remove via textContent</button>

Opsi 2 A: Looping untuk menghapus setiap lastChild:

• Sunting sebelumnya untuk jawaban ini digunakan firstChild, tetapi ini diperbarui untuk digunakan lastChildseperti dalam ilmu komputer, secara umum , secara signifikan lebih cepat untuk menghapus elemen terakhir dari koleksi daripada untuk menghapus elemen pertama (tergantung pada bagaimana koleksi diimplementasikan ).
• Loop terus memeriksa untuk firstChild berjaga-jaga jika lebih cepat untuk memeriksa firstChilddaripada lastChild(misalnya jika daftar elemen diimplementasikan sebagai daftar tertaut yang diarahkan oleh UA).

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  while (myNode.firstChild) {
    myNode.removeChild(myNode.lastChild);
  }
}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <span>Hello</span>
</div>
<button id='doFoo'>Remove via lastChild-loop</button>

Opsi 2 B: Looping untuk menghapus setiap lastElementChild:

• Pendekatan ini memelihara semua anak-anak yang bukan Element(yaitu #textsimpul dan <!-- comments -->) dari orang tua (tetapi bukan keturunan mereka) - dan ini mungkin diinginkan dalam aplikasi Anda (misalnya beberapa sistem templating yang menggunakan komentar HTML sebaris untuk menyimpan instruksi templat).
• Pendekatan ini tidak digunakan sampai beberapa tahun terakhir karena Internet Explorer hanya menambahkan dukungan untuk lastElementChilddi IE9.

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  while (myNode.lastElementChild) {
    myNode.removeChild(myNode.lastElementChild);
  }
}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <!-- This comment won't be removed -->
  <span>Hello <!-- This comment WILL be removed --></span>
  <!-- But this one won't. -->
</div>
<button id='doFoo'>Remove via lastElementChild-loop</button>

Bonus: Element.clearChildrenmonkey-patch:

• Kita dapat menambahkan metode-properti baru ke Elementprototipe dalam JavaScript untuk menyederhanakan memohon untuk hanya el.clearChildren()(di mana eladalah salah HTML objek elemen).
• (Sebenarnya ini adalah patch monyet, bukan polyfill, karena ini bukan fitur DOM standar atau fitur yang hilang. Perhatikan bahwa patch monyet tidak disarankan dalam banyak situasi.)

if( typeof Element.prototype.clearChildren === 'undefined' ) {
    Object.defineProperty(Element.prototype, 'clearChildren', {
      configurable: true,
      enumerable: false,
      value: function() {
        while(this.firstChild) this.removeChild(this.lastChild);
      }
    });
}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <span>Hello <!-- This comment WILL be removed --></span>
</div>
<button onclick="this.previousElementSibling.clearChildren()">Remove via monkey-patch</button>

Jawaban yang saat ini diterima salah tentang innerHTMLmenjadi lebih lambat (setidaknya di IE dan Chrome), seperti yang disebutkan dengan benar m93a.

Chrome dan FF secara dramatis lebih cepat menggunakan metode ini (yang akan menghancurkan data jquery terlampir):

var cNode = node.cloneNode(false);
node.parentNode.replaceChild(cNode, node);

dalam beberapa detik untuk FF dan Chrome, dan tercepat di IE:

node.innerHTML = '';

InnerHTML tidak akan memusnahkan event handler Anda atau menghancurkan referensi jquery , juga direkomendasikan sebagai solusi di sini: https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML .

Metode manipulasi DOM tercepat (masih lebih lambat dari dua sebelumnya) adalah penghapusan Rentang, tetapi rentang tidak didukung sampai IE9.

var range = document.createRange();
range.selectNodeContents(node);
range.deleteContents();

Metode lain yang disebutkan tampaknya sebanding, tetapi jauh lebih lambat daripada innerHTML, kecuali untuk outlier, jquery (1.1.1 dan 3.1.1), yang jauh lebih lambat dari yang lain:

$(node).empty();

Bukti di sini:

http://jsperf.com/innerhtml-vs-removechild/167 http://jsperf.com/innerhtml-vs-removechild/300 https://jsperf.com/remove-all-child-elements-of-a- dom-node-in-javascript (URL baru untuk reboot jsperf karena mengedit URL lama tidak berfungsi)

"Per-test-loop" Jsperf sering dipahami sebagai "per-iterasi", dan hanya iterasi pertama yang memiliki node untuk dihapus sehingga hasilnya tidak berarti, pada saat memposting ada tes di utas ini yang dibuat secara tidak benar.

Gunakan Javascript modern, dengan remove!

const parent = document.getElementById("foo");
while (parent.firstChild) {
    parent.firstChild.remove();
}

Ini adalah cara yang lebih baru untuk menulis penghapusan node di ES5. Ini adalah vanilla JS dan jauh lebih bagus daripada versi sebelumnya.

Sebagian besar pengguna harus memiliki peramban modern atau Anda dapat melakukan transpile turun jika diperlukan.

Dukungan Browser - 95% Des 2019

var myNode = document.getElementById("foo");
var fc = myNode.firstChild;

while( fc ) {
    myNode.removeChild( fc );
    fc = myNode.firstChild;
}

Jika ada kemungkinan Anda memiliki keturunan yang terpengaruh jQuery, maka Anda harus menggunakan beberapa metode yang akan membersihkan data jQuery.

$('#foo').empty();

.empty()Metode jQuery akan memastikan bahwa data apa pun yang terkait dengan jQuery dengan elemen yang dihapus akan dibersihkan.

Jika Anda hanya menggunakan DOMmetode menghapus anak-anak, data itu akan tetap ada.

Jika Anda menggunakan jQuery:

$('#foo').empty();

Jika tidak:

var foo = document.getElementById('foo');
while (foo.firstChild) foo.removeChild(foo.firstChild);

Tercepat...

var removeChilds = function (node) {
    var last;
    while (last = node.lastChild) node.removeChild(last);
};

Terima kasih kepada Andrey Lushnikov untuk tautannya ke jsperf.com (situs keren!).

EDIT: untuk menjadi jelas, tidak ada perbedaan kinerja di Chrome antara firstChild dan lastChild. Jawaban teratas menunjukkan solusi yang baik untuk kinerja.

Jika Anda hanya ingin memiliki simpul tanpa anak-anaknya, Anda juga dapat membuat salinannya seperti ini:

var dupNode = document.getElementById("foo").cloneNode(false);

Tergantung pada apa yang ingin Anda capai.

Inilah pendekatan lain:

function removeAllChildren(theParent){

    // Create the Range object
    var rangeObj = new Range();

    // Select all of theParent's children
    rangeObj.selectNodeContents(theParent);

    // Delete everything that is selected
    rangeObj.deleteContents();
}

element.textContent = '';

Ini seperti innerText, kecuali standar. Ini sedikit lebih lambat daripada removeChild(), tetapi lebih mudah digunakan dan tidak akan membuat banyak perbedaan kinerja jika Anda tidak memiliki terlalu banyak hal untuk dihapus.

Menanggapi DanMan, Maarten dan Matt. Mengkloning sebuah node, untuk mengatur teks memang cara yang layak dalam hasil saya.

// @param {node} node
// @return {node} empty node
function removeAllChildrenFromNode (node) {
  var shell;
  // do not copy the contents
  shell = node.cloneNode(false);

  if (node.parentNode) {
    node.parentNode.replaceChild(shell, node);
  }

  return shell;
}

// use as such
var myNode = document.getElementById('foo');
myNode = removeAllChildrenFromNode( myNode );

Ini juga berfungsi untuk node tidak di dom yang mengembalikan null ketika mencoba mengakses parentNode. Selain itu, jika Anda perlu aman, sebuah node kosong sebelum menambahkan konten, ini sangat membantu. Pertimbangkan use case di bawahnya.

// @param {node} node
// @param {string|html} content
// @return {node} node with content only
function refreshContent (node, content) {
  var shell;
  // do not copy the contents
  shell = node.cloneNode(false);

  // use innerHTML or you preffered method
  // depending on what you need
  shell.innerHTML( content );

  if (node.parentNode) {
    node.parentNode.replaceChild(shell, node);
  }

  return shell;
}

// use as such
var myNode = document.getElementById('foo');
myNode = refreshContent( myNode );

Saya menemukan metode ini sangat berguna ketika mengganti string di dalam elemen, jika Anda tidak yakin apa yang akan mengandung node, daripada khawatir bagaimana membersihkan kekacauan, mulailah dengan segar.

Inilah yang biasanya saya lakukan:

HTMLElement.prototype.empty = function() {
    while (this.firstChild) {
        this.removeChild(this.firstChild);
    }
}

Dan voila, nanti Anda dapat mengosongkan elemen dom dengan:

anyDom.empty()

Ada beberapa opsi untuk mencapai itu:

Tercepat ():

while (node.lastChild) {
  node.removeChild(node.lastChild);
}

Alternatif (lebih lambat):

while (node.firstChild) {
  node.removeChild(node.firstChild);
}

while (node.hasChildNodes()) {
  node.removeChild(node.lastChild);
}

Benchmark dengan opsi yang disarankan

var empty_element = function (element) {

    var node = element;

    while (element.hasChildNodes()) {              // selected elem has children

        if (node.hasChildNodes()) {                // current node has children
            node = node.lastChild;                 // set current node to child
        }
        else {                                     // last child found
            console.log(node.nodeName);
            node = node.parentNode;                // set node to parent
            node.removeChild(node.lastChild);      // remove last node
        }
    }
}

Ini akan menghapus semua node dalam elemen.

innerText adalah pemenangnya! http://jsperf.com/innerhtml-vs-removechild/133 . Pada semua tes sebelumnya, dom dom dari simpul orangtua dihapus pada iterasi pertama dan kemudian innerHTML atau removeChild di mana diterapkan pada div kosong.

Cara termudah untuk menghapus simpul anak dari sebuah simpul melalui Javascript

var myNode = document.getElementById("foo");
while(myNode.hasChildNodes())
{
   myNode.removeChild(myNode.lastChild);
}

saya melihat orang melakukan:

while (el.firstNode) {
    el.removeChild(el.firstNode);
}

lalu seseorang berkata menggunakan el.lastNodelebih cepat

namun saya akan berpikir bahwa ini yang tercepat:

var children = el.childNodes;
for (var i=children.length - 1; i>-1; i--) {
    el.removeNode(children[i]);
}

Bagaimana menurut anda?

ps: topik ini adalah penyelamat bagi saya. addon firefox saya ditolak karena saya menggunakan innerHTML. Sudah kebiasaan untuk waktu yang lama. maka saya foudn ini. dan saya benar-benar memperhatikan perbedaan kecepatan. saat memuat, innerhtml perlu beberapa saat untuk memperbarui, namun dengan addElement instan!

Menggunakan rentang loop terasa paling alami bagi saya:

for (var child of node.childNodes) {
    child.remove();
}

Menurut pengukuran saya di Chrome dan Firefox, ini sekitar 1.3x lebih lambat. Dalam keadaan normal, ini mungkin tidak masalah.

 let el = document.querySelector('#el');
 if (el.hasChildNodes()) {
      el.childNodes.forEach(child => el.removeChild(child));
 }

Secara umum, JavaScript menggunakan array untuk referensi daftar node DOM. Jadi, ini akan berfungsi dengan baik jika Anda memiliki minat untuk melakukannya melalui array HTMLElements. Juga, patut dicatat, karena saya menggunakan referensi array bukan JavaScript proto, ini harus bekerja di browser apa pun, termasuk IE.

while(nodeArray.length !== 0) {
  nodeArray[0].parentNode.removeChild(nodeArray[0]);
}

Mengapa kita tidak mengikuti metode paling sederhana di sini "hapus" di dalam sementara.

const foo = document.querySelector(".foo");
while (foo.firstChild) {
  foo.firstChild.remove();     
}

• Memilih div induk
• Menggunakan "hapus" Metode di dalam loop Sementara untuk menghilangkan elemen anak pertama, sampai tidak ada yang tersisa.

Hanya melihat seseorang menyebutkan pertanyaan ini di yang lain dan berpikir saya akan menambahkan metode yang belum saya lihat:

function clear(el) {
    el.parentNode.replaceChild(el.cloneNode(false), el);
}

var myNode = document.getElementById("foo");
clear(myNode);

Fungsi yang jelas adalah mengambil elemen dan menggunakan simpul orangtua untuk mengganti sendiri dengan salinan tanpa anak-anak itu. Tidak banyak peningkatan kinerja jika elemen jarang tetapi ketika elemen memiliki banyak node, keuntungan kinerja direalisasikan.

Pendekatan hanya fungsional:

const domChildren = (el) => Array.from(el.childNodes)
const domRemove = (el) => el.parentNode.removeChild(el)
const domEmpty = (el) => domChildren(el).map(domRemove)

"childNodes" di domChildren akan memberikan nodeList dari elemen anak-anak langsung, yang kosong ketika tidak ada yang ditemukan. Untuk memetakan melalui nodeList, domChildren mengubahnya menjadi array. domEmpty memetakan fungsi domRemove atas semua elemen yang menghapusnya.

Contoh penggunaan:

domEmpty(document.body)

menghapus semua anak dari elemen tubuh.

Cara lain di jQuery

var foo = $("#foo");
foo.children().remove();
//or
$("*", foo ).remove();
//or
foo.html("");
//or
foo.empty();

cukup hanya IE:

parentElement.removeNode(true);

true - Berarti untuk melakukan deep removal - yang berarti bahwa semua anak juga dihapus

Cara termudah:

let container = document.getElementById("containerId");
container.innerHTML = "";

sederhana dan cepat digunakan untuk loop !!

var myNode = document.getElementById("foo");

    for(var i = myNode.childNodes.length - 1; i >= 0; --i) {
      myNode.removeChild(myNode.childNodes[i]);
    }

ini tidak akan berfungsi dalam <span>tag!

Jika Anda ingin memasukkan sesuatu ke dalamnya div, innerHTMLitu mungkin lebih baik.

Contoh saya:

<ul><div id="result"></div></ul>

<script>
  function displayHTML(result){
    var movieLink = document.createElement("li");
    var t = document.createTextNode(result.Title);
    movieLink.appendChild(t);
    outputDiv.appendChild(movieLink);
  }
</script>

Jika saya menggunakan metode .firstChildatau fungsi tidak bekerja setelahnya, tetapi tidak ada masalah dengan metode tersebut..lastChilddisplayHTML().innerHTML

Ini adalah javascript murni saya tidak menggunakan jQuery tetapi bekerja di semua browser bahkan IE dan sangat mudah dimengerti

   <div id="my_div">
    <p>Paragraph one</p>
    <p>Paragraph two</p>
    <p>Paragraph three</p>
   </div>
   <button id ="my_button>Remove nodes ?</button>

   document.getElementById("my_button").addEventListener("click",function(){

  let parent_node =document.getElemetById("my_div"); //Div which contains paagraphs

  //Let find numbers of child inside the div then remove all
  for(var i =0; i < parent_node.childNodes.length; i++) {
     //To avoid a problem which may happen if there is no childNodes[i] 
     try{
       if(parent_node.childNodes[i]){
         parent_node.removeChild(parent_node.childNodes[i]);
       }
     }catch(e){
     }
  }

})

or you may simpli do this which is a quick way to do

document.getElementById("my_button").addEventListener("click",function(){

 let parent_node =document.getElemetById("my_div");
 parent_node.innerHTML ="";

})

dengan jQuery:

$("#foo").find("*").remove();