ฉันจะลบองค์ประกอบย่อยทั้งหมดของโหนด DOM ใน JavaScript ได้อย่างไร

สมมติว่าฉันมี HTML ต่อไปนี้ (น่าเกลียด):

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

และฉันคว้าโหนดที่ฉันต้องการ:

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

ฉันจะลบลูก ๆ ของ fooที่เหลือ<p id="foo"></p>อยู่ได้อย่างไร

ฉันทำได้ไหม:

myNode.childNodes = new Array();

หรือฉันควรจะใช้การรวมกันของremoveElement?

ฉันต้องการคำตอบที่จะตรง DOM; แม้ว่าจะมีคะแนนเพิ่มหากคุณให้คำตอบเป็น jQuery พร้อมกับคำตอบเฉพาะ DOM เท่านั้น

ตัวเลือกที่ 1 A: innerHTMLสำนักหักบัญชี

• วิธีนี้ง่าย แต่อาจไม่เหมาะสำหรับแอปพลิเคชันที่มีประสิทธิภาพสูงเนื่องจากจะเรียกใช้ตัวแยกวิเคราะห์ HTML ของเบราว์เซอร์ (แม้ว่าเบราว์เซอร์อาจปรับให้เหมาะสมสำหรับกรณีที่ค่าเป็นสตริงว่าง)

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>

ตัวเลือก 1 B: การหักล้าง textContent

• ข้างต้น .textContentแต่การใช้งาน ตาม MDNสิ่งนี้จะเร็วกว่าinnerHTMLที่เบราว์เซอร์จะไม่เรียกใช้ตัวแยกวิเคราะห์ HTML และจะแทนที่เด็ก ๆ ทั้งหมดขององค์ประกอบด้วย#textโหนดเดียวแทน

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>

ตัวเลือก 2 A: วนรอบเพื่อลบทุกรายการlastChild:

• การแก้ไขคำตอบก่อนหน้านี้ที่ใช้ก่อนหน้านี้firstChildแต่สิ่งนี้ได้รับการอัปเดตเพื่อใช้lastChildเช่นเดียวกับในวิทยาศาสตร์คอมพิวเตอร์โดยทั่วไปจะเร็วกว่ามากในการลบคำตอบสุดท้ายออกองค์ประกอบของคอลเลกชันองค์ประกอบแรกออกมาอย่างรวดเร็ว )
• การวนซ้ำยังคงตรวจสอบfirstChild ในกรณีที่การตรวจสอบเร็วfirstChildกว่าlastChild(เช่นหากรายการองค์ประกอบถูกนำไปใช้เป็นรายการเชื่อมโยงโดยตรงโดย 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>

ตัวเลือก 2 B: การวนลูปเพื่อลบทุกอย่างlastElementChild:

• วิธีการนี้จะเก็บรักษาที่ไม่ใช่ทั้งหมดElement(คือ#textโหนดและ<!-- comments --> ) ลูกของพาเรนต์ (แต่ไม่ใช่ลูกหลาน) - และสิ่งนี้อาจเป็นที่ต้องการในแอปพลิเคชันของคุณ (เช่นระบบการสร้างเทมเพลตบางระบบที่ใช้ข้อคิดเห็น HTML แบบอินไลน์
• วิธีการนี้ไม่ได้ใช้จนกระทั่งปีที่ผ่านมาเนื่องจาก Internet Explorer ได้เพิ่มการรองรับlastElementChildใน 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>

โบนัส: Element.clearChildrenแพทช์ลิง:

• เราสามารถเพิ่มคุณสมบัติเมธอดใหม่ให้กับElementต้นแบบใน JavaScript เพื่อทำให้การเรียกใช้ง่ายขึ้นเพียงel.clearChildren()(ซึ่งelเป็นวัตถุองค์ประกอบ HTML ใด ๆ )
• (การพูดอย่างเคร่งครัดนี่คือ Monkey-patch ไม่ใช่ polyfill เนื่องจากนี่ไม่ใช่คุณสมบัติ DOM มาตรฐานหรือคุณสมบัติที่ขาดหายไปโปรดทราบว่าการแก้ไขโดยลิงนั้นไม่ได้รับอนุญาตอย่างถูกต้องในหลาย ๆ สถานการณ์)

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>

คำตอบที่ยอมรับในปัจจุบันนั้นผิดเกี่ยวกับinnerHTMLการช้าลง (อย่างน้อยใน IE และ Chrome) ตามที่ m93a กล่าวถึงอย่างถูกต้อง

Chrome และ FF เร็วขึ้นอย่างมากโดยใช้วิธีนี้ (ซึ่งจะทำลายข้อมูล jquery ที่แนบมา):

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

ในอีกไม่กี่วินาทีสำหรับ FF และ Chrome และเร็วที่สุดใน IE:

node.innerHTML = '';

InnerHTML จะไม่ทำลายตัวจัดการเหตุการณ์ของคุณหรือทำลายอ้างอิง jQueryก็ยังแนะนำเป็นวิธีแก้ปัญหาที่นี่: https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML

วิธีการจัดการ DOM ที่เร็วที่สุด (ยังช้ากว่าสองรายการก่อนหน้า) คือการลบช่วง แต่ไม่รองรับช่วงจนถึง IE9

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

วิธีอื่น ๆ ที่กล่าวมาดูเหมือนจะเปรียบเทียบกัน แต่ช้ากว่า innerHTML มากยกเว้น outquery, jquery (1.1.1 และ 3.1.1) ซึ่งช้ากว่าสิ่งอื่นมาก:

$(node).empty();

หลักฐานที่นี่:

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 ใหม่สำหรับ jsperf รีบูตเนื่องจากการแก้ไข URL เก่าไม่ทำงาน)

"ต่อการทดสอบลูป" ของ Jsperf มักจะถูกเข้าใจว่าเป็น "การทำซ้ำต่อ" และเฉพาะการทำซ้ำครั้งแรกเท่านั้นที่มีโหนดที่จะลบดังนั้นผลลัพธ์จึงไม่มีความหมายในขณะที่ทำการโพสต์มีการทดสอบในชุดข้อความนี้

ใช้ Javascript ที่ทันสมัยด้วยremove!

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

นี่เป็นวิธีใหม่ในการเขียนการลบโหนดใน ES5 มันคือวานิลลา JS และอ่านได้ดีกว่ารุ่นก่อนหน้ามาก

ผู้ใช้ส่วนใหญ่ควรมีเบราว์เซอร์ที่ทันสมัยหรือคุณสามารถ transpile หากจำเป็น

รองรับเบราว์เซอร์ - 95% ธันวาคม 2019

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

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

หากมีโอกาสที่คุณจะได้รับผลกระทบจากการสืบทอด jQuery คุณต้องใช้วิธีการที่จะล้างข้อมูล jQuery

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

.empty()วิธีการjQueryจะทำให้มั่นใจได้ว่าข้อมูลใด ๆ ที่ jQuery ที่เกี่ยวข้องกับองค์ประกอบที่ถูกลบจะถูกล้างออก

หากคุณใช้DOMวิธีลบเด็ก ๆ ข้อมูลนั้นจะยังคงอยู่

หากคุณใช้ jQuery:

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

หากคุณไม่:

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

ที่เร็วที่สุด...

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

ขอบคุณ Andrey Lushnikov สำหรับลิงก์ของเขาไปยัง jsperf.com (เว็บไซต์ยอดเยี่ยม!)

แก้ไข: เพื่อให้ชัดเจนไม่มีความแตกต่างด้านประสิทธิภาพใน Chrome ระหว่าง firstChild และ lastChild คำตอบยอดนิยมแสดงให้เห็นถึงทางออกที่ดีสำหรับประสิทธิภาพ

หากคุณต้องการมีโหนดที่ไม่มีโหนดลูกคุณก็สามารถทำสำเนาได้เช่นนี้

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

ขึ้นอยู่กับสิ่งที่คุณพยายามทำ

นี่เป็นวิธีการอื่น:

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 = '';

มันเหมือน innerText ยกเว้นมาตรฐาน มันช้ากว่านิดหน่อยremoveChild()แต่มันใช้งานง่ายกว่าและจะไม่สร้างความแตกต่างด้านประสิทธิภาพมากนักหากคุณไม่มีสิ่งที่จะลบมากเกินไป

ในการตอบสนองต่อ DanMan, Maarten และ Matt การโคลนโหนดเพื่อตั้งค่าข้อความเป็นวิธีที่ทำงานได้จริงในผลลัพธ์ของฉัน

// @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 );

นอกจากนี้ยังใช้งานได้กับโหนดที่ไม่อยู่ใน dom ซึ่งคืนค่า null เมื่อพยายามเข้าถึง parentNode นอกจากนี้หากคุณต้องการความปลอดภัยโหนดว่างเปล่าก่อนเพิ่มเนื้อหาสิ่งนี้มีประโยชน์จริง ๆ พิจารณากรณีการใช้งานที่อยู่ด้านล่าง

// @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 );

ฉันพบว่าวิธีนี้มีประโยชน์มากเมื่อแทนที่สตริงภายในองค์ประกอบถ้าคุณไม่แน่ใจว่าโหนดจะมีอะไรแทนที่จะกังวลวิธีทำความสะอาดระเบียบให้เริ่มต้นใหม่

นี่คือสิ่งที่ฉันมักจะทำ:

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

และ voila หลังจากนั้นคุณสามารถทำให้ว่างองค์ประกอบ dom ด้วย:

anyDom.empty()

มีสองตัวเลือกเพื่อให้บรรลุว่า:

ที่เร็วที่สุด ():

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

ทางเลือก (ช้ากว่า):

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

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

เกณฑ์มาตรฐานพร้อมตัวเลือกที่แนะนำ

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
        }
    }
}

สิ่งนี้จะลบโหนดทั้งหมดในองค์ประกอบ

InnerText เป็นผู้ชนะ! http://jsperf.com/innerhtml-vs-removechild/133 ในการทดสอบก่อนหน้านี้ทั้งหมด dom ภายในของโหนดหลักถูกลบในการวนซ้ำครั้งแรกจากนั้น InnerHTML หรือ removeChild โดยที่ใช้กับ div ที่ว่างเปล่า

วิธีที่ง่ายที่สุดในการลบโหนดย่อยของโหนดผ่าน Javascript

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

ฉันเห็นคนกำลังทำ:

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

ถ้ามีคนบอกว่าใช้el.lastNodeเร็วกว่า

อย่างไรก็ตามฉันคิดว่านี่เป็นวิธีที่เร็วที่สุด:

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

คุณคิดอย่างไร?

PS: หัวข้อนี้เป็นตัวช่วยชีวิตสำหรับฉัน firefox addon ของฉันถูกปฏิเสธเพราะฉันใช้ innerHTML มันเคยเป็นนิสัยมาเป็นเวลานาน ถ้าอย่างนั้นฉันก็ทำอย่างนี้ และฉันก็สังเกตเห็นความแตกต่างความเร็ว ในการโหลด Innerhtml ใช้เวลาสักครู่ในการอัปเดต แต่จะดำเนินการตาม addElement ทันที!

การใช้ช่วงลูปจะรู้สึกเป็นธรรมชาติที่สุดสำหรับฉัน:

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

ตามการวัดของฉันใน Chrome และ Firefox มันช้าลงประมาณ 1.3 เท่า ในสถานการณ์ปกติสิ่งนี้อาจไม่สำคัญ

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

โดยทั่วไป JavaScript ใช้อาร์เรย์เพื่ออ้างอิงรายการของโหนด DOM ดังนั้นสิ่งนี้จะทำงานได้ดีถ้าคุณมีความสนใจในการทำมันผ่านอาร์เรย์ HTMLElements นอกจากนี้ยังมีข้อควรระวังเนื่องจากฉันใช้การอ้างอิงอาเรย์แทน JavaScript proto สิ่งนี้ควรใช้ได้กับเบราว์เซอร์ใด ๆ รวมถึง IE

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

ทำไมเราไม่ทำตามวิธีที่ง่ายที่สุดที่นี่ "ลบ" วนซ้ำภายในขณะที่

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

• การเลือกผู้ปกครอง div
• การใช้วิธี "remove" ภายในห่วงวนขณะเพื่อกำจัดองค์ประกอบลูกที่หนึ่งจนกระทั่งไม่มีสิ่งใดเหลืออยู่

เพิ่งเห็นใครบางคนพูดถึงคำถามนี้และคิดว่าฉันจะเพิ่มวิธีการที่ฉันยังไม่เห็น:

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

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

ฟังก์ชั่นที่ชัดเจนคือการใช้องค์ประกอบและการใช้โหนดแม่เพื่อแทนที่ตัวเองด้วยการคัดลอกโดยไม่ต้องเป็นลูก ประสิทธิภาพเพิ่มขึ้นไม่มากนักหากองค์ประกอบกระจัดกระจาย แต่เมื่อองค์ประกอบมีโหนดจำนวนมากประสิทธิภาพจะเพิ่มขึ้น

วิธีการทำงานเฉพาะ:

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

"childNodes" ใน domChildren จะให้ nodeList ขององค์ประกอบชายด์ทันทีซึ่งว่างเปล่าเมื่อไม่พบ เพื่อแม็พผ่าน nodeList domChildren จะแปลงเป็นอาร์เรย์ domEmpty แมปฟังก์ชัน domRemove เหนือองค์ประกอบทั้งหมดที่เอาออก

ตัวอย่างการใช้งาน:

domEmpty(document.body)

ลบเด็กทั้งหมดออกจากองค์ประกอบร่างกาย

วิธีอื่น ๆ ใน jQuery

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

เพียงแค่ IE เท่านั้น:

parentElement.removeNode(true);

true - หมายถึงทำการลบอย่างลึก - ซึ่งหมายความว่าเด็กทุกคนจะถูกลบออกด้วย

วิธีที่ง่ายที่สุด:

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

ง่ายและรวดเร็วในการใช้วนรอบ !!

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

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

สิ่งนี้จะไม่ทำงานใน<span>แท็ก!

หากคุณต้องการที่จะนำบางสิ่งบางอย่างกลับเข้ามาในที่divที่innerHTMLอาจจะดีกว่าคือ

ตัวอย่างของฉัน:

<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>

ถ้าฉันใช้.firstChildหรือ.lastChildวิธีการdisplayHTML()ฟังก์ชั่นไม่ทำงานหลังจากนั้น แต่ไม่มีปัญหากับ.innerHTMLวิธีการ

นี่คือจาวาสคริปต์ที่แท้จริงฉันไม่ได้ใช้ jQuery แต่ใช้ได้กับเบราว์เซอร์ทั้งหมดแม้กระทั่ง IE และมันก็เข้าใจง่าย

   <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 ="";

})

ด้วย jQuery:

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