选项 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猴子补丁：

• 我们可以向ElementJavaScript 中的原型添加一个新的方法属性，以简化对它的调用el.clearChildren()（其中el是任何HTML 元素对象）。
• （严格来说，这是一个猴子补丁，而不是 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正如 m93a 正确提到的那样，当前接受的答案是错误的（至少在 IE 和 Chrome 中）。

使用此方法（这会破坏附加的 jquery 数据），Chrome 和 FF 的速度要快得多：

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 操作方法（仍然比前两种慢）是 Range 移除，但直到 IE9 才支持 Ranges。

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 （jsperf 重启的新 url，因为编辑旧 url 不起作用）

Jsperf 的“per-test-loop”通常被理解为“per-iteration”，只有第一次迭代有节点要删除，所以结果没有意义，在发布时，这个线程中的测试设置不正确。

使用现代 Javascript，带有remove!

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

这是一种在 ES5 中编写节点删除的较新方法。它是 vanilla JS，比依赖父级读起来要好得多。

支持所有现代浏览器。

浏览器支持- 97% 21 年 6 月

2020 年更新 - 使用replaceChildren()API！

现在可以使用（跨浏览器支持）replaceChildrenAPI替换所有子项：

container.replaceChildren(...arrayOfNewChildren);

这将同时做到：

• 删除所有现有的孩子，和
• 在一次操作中附加所有给定的新孩子。

您还可以使用相同的 API 来删除现有的子项，而不替换它们：

container.replaceChildren();

Chrome/Edge 86+、Firefox 78+ 和 Safari 14+ 完全支持此功能。这是完全指定的行为。这可能比这里提出的任何其他方法都快，因为删除旧孩子和添加新孩子不需要innerHTML，并且一步而不是多个。

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删除子项的方法，则该数据将保留。