ตัวเลือก 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 แพทช์ลิง:

• เราสามารถเพิ่ม method-property ใหม่ให้กับ 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 มาก ยกเว้นค่าผิดปกติ 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 มันคือ vanilla JS และอ่านได้ มาก ดีกว่าการพึ่งพา parent

รองรับเบราว์เซอร์สมัยใหม่ทั้งหมด

การสนับสนุนเบราว์เซอร์ - 97% มิ.ย. 21

อัปเดตปี 2020 - ใช้ replaceChildren() API!

ตอนนี้การแทนที่ลูกทั้งหมดสามารถทำได้ด้วย (รองรับเบราว์เซอร์ข้าม) แทนที่Children() API:

container.replaceChildren(...arrayOfNewChildren);

การดำเนินการนี้จะทำทั้งสองอย่าง: a) ลบรายการย่อยที่มีอยู่ทั้งหมด และ b) ผนวกรายการย่อยใหม่ที่กำหนดทั้งหมด ในการดำเนินการครั้งเดียว

คุณยังสามารถใช้ API เดียวกันนี้เพื่อลบรายการลูกที่มีอยู่โดยไม่ต้องแทนที่:

container.replaceChildren();

รองรับ Chrome/Edge 86+, Firefox 78+ และ Safari 14+ อย่างสมบูรณ์ (โปรดทราบว่าข้อมูล MDN ไม่ถูกต้องสำหรับ Safari ในขณะนี้) ระบุอย่างสมบูรณ์พฤติกรรม วิธีนี้น่าจะ เร็วกว่า กว่าวิธีอื่นๆ ที่เสนอที่นี่ เนื่องจากการถอดรายการลูกเก่าและการเพิ่มรายการลูกใหม่เสร็จสิ้นแล้ว a) โดยไม่ต้องใช้ innerHTML และ b) ในขั้นตอนเดียวแทนที่จะเป็นหลายรายการ

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

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

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

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

เมธอด jQuery .empty() จะทำให้แน่ใจได้ว่าข้อมูลใดๆ ที่ 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 คำตอบยอดนิยมแสดงวิธีแก้ปัญหาที่ดีสำหรับประสิทธิภาพ

elm.replaceChildren()

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

เอกสารประกอบที่นี่

หากคุณต้องการเพียงมีโหนดที่ไม่มีลูก คุณสามารถสร้างสำเนาของมันได้ดังนี้:

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() แต่ใช้งานง่ายกว่าและจะไม่สร้างความแตกต่างด้านประสิทธิภาพมากนักหากคุณไม่' ไม่มีสิ่งที่จะลบมากเกินไป

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

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

และต่อมาคุณสามารถล้างองค์ประกอบ dom ใด ๆ ด้วย:

anyDom.empty()

Ecma6 ช่วยให้ใช้งานได้ง่ายและกะทัดรัด

myNode.querySelectorAll('*').forEach( n => n.remove() );

นี่เป็นการตอบคำถาม และ ลบ “โหนดย่อยทั้งหมด”

หากมีโหนดข้อความที่เป็นของ myNode ไม่สามารถเลือกได้ด้วยตัวเลือก CSS ในกรณีนี้ เราต้องใช้ (เช่น):

myNode.textContent = '';

อันที่จริงอันสุดท้ายอาจเป็นวิธีแก้ปัญหาที่เร็วและมีประสิทธิภาพมากกว่า

.textContent มีประสิทธิภาพมากกว่า .innerText และ .innerHTML โปรดดู: MDN

เพื่อตอบสนองต่อ 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 ซึ่งส่งคืนค่าว่างเมื่อพยายามเข้าถึง 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 );

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

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

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

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

มีสองทางเลือกในการบรรลุเป้าหมายดังกล่าว:

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

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 ของฉันถูกปฏิเสธเพราะฉันใช้ innerHTML มันเป็นนิสัยมานานแล้ว แล้วฉันก็พบสิ่งนี้ และฉันก็สังเกตเห็นความแตกต่างด้านความเร็วจริงๆ เมื่อโหลด Innerhtml ใช้เวลาสักครู่ในการอัปเดต แต่ดำเนินการโดย addElement ทันที!

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

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

ทำไมเราไม่ทำตามวิธีที่ง่ายที่สุดที่นี่ "remove" วนซ้ำอยู่ข้างใน

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

• การเลือก div ระดับบนสุด
• การใช้เมธอด "remove" ภายใน While loop เพื่อกำจัดองค์ประกอบลูกแรก จนกระทั่งไม่เหลือเลย

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

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)

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

คุณสามารถลบองค์ประกอบย่อยทั้งหมดออกจากคอนเทนเนอร์ได้ดังนี้:

function emptyDom(selector){
 const elem = document.querySelector(selector);
 if(elem) elem.innerHTML = "";
}

ตอนนี้คุณสามารถเรียกใช้ฟังก์ชันและส่งตัวเลือกดังนี้:

หากองค์ประกอบมี id = foo

emptyDom('#foo');

หากองค์ประกอบมีคลาส = foo

emptyDom('.foo');

ถ้าองค์ประกอบมี tag = ‹div›

emptyDom('div')

element.innerHTML = "" (หรือ .textContent) คือ โดยมาก วิธีแก้ปัญหาที่เร็วที่สุด

คำตอบส่วนใหญ่ที่นี่มาจากการทดสอบที่มีข้อบกพร่อง

ตัวอย่างเช่น: https://jsperf.com/innerhtml-vs-removechild/15
การทดสอบนี้ไม่ได้เพิ่มลูกใหม่ให้กับองค์ประกอบระหว่างการวนซ้ำแต่ละครั้ง การวนซ้ำครั้งแรกจะลบเนื้อหาขององค์ประกอบ และการวนซ้ำอื่นๆ จะไม่ทำอะไรเลย ในกรณีนี้ while (box.lastChild) box.removeChild(box.lastChild) เร็วกว่าเนื่องจาก box.lastChild คือ null 99% ของเวลา

นี่คือการทดสอบที่เหมาะสม: https://jsperf.com/innerhtml-conspiracy

สุดท้าย อย่า ใช้ node.parentNode.replaceChild(node.cloneNode(false), node) สิ่งนี้จะแทนที่โหนดด้วยสำเนาของตัวเองโดยไม่มีลูก อย่างไรก็ตาม สิ่งนี้จะไม่รักษาผู้ฟังเหตุการณ์และทำลายการอ้างอิงอื่น ๆ ไปยังโหนด

หากคุณต้องการล้างข้อมูลพาเรนต์ทั้งหมด DOM ก็ง่ายมาก...

เพียงใช้ .empty()

function removeAll() {
  $('#parent').empty();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="removeAll()">Remove all the element of parent</button>
<div id="parent">
  <h3>Title</h3>
  <p>Child 1</p>
  <p>Child 2</p>
  <p>Child 3</p>
</div>

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

parentElement.removeNode(true);

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

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

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

ง่ายและรวดเร็วโดยใช้ for loop!!

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

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

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

วิธีอื่นใน jQuery

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

หากคุณต้องการใส่บางสิ่งกลับเข้าไปใน 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();