【问题标题】：Remove all child elements of a DOM node in JavaScript在 JavaScript 中删除 DOM 节点的所有子元素
【发布时间】：2011-04-26 16:41:16
【问题描述】：

如何在 JavaScript 中删除 DOM 节点的所有子元素？

假设我有以下（丑陋的）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 的答案，则可以加分。

【问题讨论】：

标签： javascript dom

【解决方案1】：

选项 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。 According to 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，就像在计算机科学中一样，一般，删除last 集合的元素，而不是删除第一个元素（取决于集合的实现方式）。
循环继续检查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 节点和 ）的父节点（但不是它们的后代） - 这在您的应用程序中可能是可取的（例如，一些使用内联的模板系统HTML cmets 来存储模板指令）。
这种方法直到最近几年才被使用，因为 Internet Explorer 仅在 IE9 中添加了对 lastElementChild 的支持。

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

我们可以在 JavaScript 中向 Element 原型添加一个新的方法属性，以简化对它的调用，只需 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>

【讨论】：

从 jQuery 中可能会考虑这两个问题：此方法不仅删除子（和其他后代）元素，还删除匹配元素集中的任何文本。这是因为，根据 DOM 规范，元素中的任何文本字符串都被视为该元素的子节点。并且“为了避免内存泄漏，jQuery 在删除元素本身之前从子元素中删除其他构造，例如数据和事件处理程序。”
innerHTML 仅在您只处理 HTML 时才有效。如果有例如SVG 内部只有元素删除才能工作
永远不要使用 innerHTML = ''。别。问题是这些项目看起来像是被移除了，但在内部，节点仍然存在并减慢了速度。您必须出于某种原因删除所有单个节点。在谷歌浏览器和 IE 中测试。请考虑删除innerHTML“解决方案”，因为它是错误的。
@micha jsperf.com/innerhtml-vs-removechild/151 使用 .remove() 甚至更快。
@vsync 我不相信 Kenji 的评论是有根据的。做innerHTML = '' 比较慢，但我不认为这是“错误的”。任何内存泄漏声明都应有证据支持。

【解决方案2】：

使用现代 Javascript，与 `remove`!

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

这是在 ES5 中编写节点删除的新方法。它是普通的 JS，比依赖父级更好地阅读。

支持所有现代浏览器。

Browser Support - 21 年 6 月 97%

【讨论】：

for 循环将不起作用，因为 parent.children / parent.childNodes 是活动列表；调用 remove 会修改列表，因此您的迭代器不能保证迭代所有内容。例如，在 chrome 中，您最终会跳过所有其他节点。最好使用while (parent.firstChild) { parent.removeChild(parent.firstChild); } 循环。 developer.mozilla.org/en-US/docs/Web/API/ParentNode/children developer.mozilla.org/en-US/docs/Web/API/Node/childNodes
很酷的速记，虽然可读性较差：while (parent.firstChild && !parent.firstChild.remove());
当性能不是很重要时的单线：[...parent.childNodes].forEach(el => el.remove());
这在 Typescript 中不起作用...改为使用 while (selectElem.firstElementChild) { selectElem.firstElementChild.remove(); }

【解决方案3】：

正如 m93a 正确提到的那样，当前接受的答案是关于 innerHTML 变慢（至少在 IE 和 Chrome 中）是错误的。

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 操作方法（仍然比前两种慢）是 Range 删除，但直到 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 （jsperf 重新启动的新 url，因为编辑旧 url 不起作用）

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

【讨论】：

你的 jsperf 完全坏了。这不是很好的证据。
这是目前最好的答案。此线程中的所有其他内容都是虚假信息（！）感谢您清理所有那些糟糕的旧测试。
"InnerHTML 不会破坏您的事件处理程序或弄乱任何 jquery 引用"它将孤立保存在 jQuery.cache 中的数据，导致内存泄漏，因为唯一可用的引用管理那些数据是在你刚刚销毁的元素上。
jsperf 测试在这里被破坏了。测试引擎报告如下：“错误：迭代期间没有重新创建Dom节点，测试结果将毫无意义。”
我正在学习 DOM 课程，因为看起来 jsperf.com 是 mia 并且可能会持续一段时间，所以我在 jsben.ch 上创建了一个页面。截至今天，innerHTML 仍然是赢家。我已经在这个兔子洞上花了太长时间了，但是在 2020 年我不得不想知道为什么我们还没有 .clear() 或 .empty() DOM 方法......

【解决方案4】：

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

现在可以使用（支持跨浏览器）replaceChildren API 替换所有子节点：

container.replaceChildren(...arrayOfNewChildren);

这两个都可以：

删除所有现有的孩子，并
在一次操作中添加所有给定的新子代。

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

container.replaceChildren();

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

【讨论】：

MDN 数据现已更正，并显示完全跨浏览器支持：caniuse.com/?search=replacechildren
很遗憾@Polaris878 自 2018 年以来就没有出现过。这应该是新接受的答案。
这比这里提到的其他方法要慢得多，至少对我来说是这样。
您介意链接到您的测试，以及您使用的浏览器/平台等详细信息吗？这会让我大吃一惊，至少在 Chrome 上是这样。

【解决方案5】：

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

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

如果你有任何可能有 jQuery 影响后代，那么你必须使用一些可以清理 jQuery 数据的方法。

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

The jQuery .empty() method 将确保 jQuery 与被删除元素关联的所有数据都将被清理。

如果您只是使用DOM 方法删除子项，则该数据将保留。

【讨论】：

innerHTML 方法是迄今为止性能最高的。也就是说，jquery 的 .empty() 正在清理的数据：使用递归循环消除与子标签关联的 jquery 内部的 data()（速度慢，但可能会显着减少内存使用量），如果您在没有附加事件的情况下防止内存泄漏jquery，例如使用 .onclick=... 。如果您在要删除的子项中没有此类事件，则设置 innerHTML 不会泄漏。所以最好的答案是 - 视情况而定。
为什么不直接把firstChild表达式放在while循环的条件中呢？ while ( myNode.firstChild ) {
while(fc = myNode.firstChild){ myNode.removeChild(fc); }

【解决方案6】：

如果你使用 jQuery：

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

如果你不这样做：

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

【讨论】：

【解决方案7】：

最快的...

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

感谢 Andrey Lushnikov his link to jsperf.com（酷网站！）。

编辑：需要明确的是，在 Chrome 中 firstChild 和 lastChild 之间没有性能差异。最佳答案显示了一个很好的性能解决方案。

【讨论】：

同样的事情没有 LINT 警告：clear: function ( container ) { for ( ; ; ) { var child = container.lastChild; if ( !child ) 中断；容器.removeChild（孩子）； } }

【解决方案8】：

使用elm.replaceChildren()。

它在没有广泛支持的情况下是实验性的，但是在没有参数的情况下执行时会满足您的要求，而且它比遍历每个子节点并删除它更有效。如前所述，用空字符串替换 innerHTML 需要浏览器进行 HTML 解析。

MDN Documentation.

【讨论】：

这仅对最近的浏览器支持没有用处。但几年后，这绝对是要走的路。感谢您指出。
caniuse.com/?search=replaceChildren 最新版本的 Chrome 和 Safari 刚刚得到它。给它几个月。上帝，我喜欢自动更新。
对空字符串进行多少 HTML 解析？

【解决方案9】：

如果您只想拥有没有子节点的节点，您也可以像这样复制它：

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

取决于你想要达到的目标。

【讨论】：

也许您甚至可以使用parent.replaceChild(cloned, original) 关注这个？这可能比逐个删除子节点更快，并且应该适用于支持 DOM 的所有内容（因此每种类型的 XML 文档，包括 SVG）。设置 innerHTML 也可能比一个一个删除子级更快，但这对 HTML 文档以外的任何内容都不起作用。应该测试一段时间。
这不会复制使用addEventListener添加的事件监听器。
如果你能忍受这个限制，那肯定很快：jsperf.com/innerhtml-vs-removechild/137

【解决方案10】：

这是另一种方法：

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();
}

【讨论】：

这很有趣，但与其他方法相比似乎相当慢：jsperf.com/innerhtml-vs-removechild/256

【解决方案11】：

element.textContent = '';

它就像innerText，除了标准。它是 a bit slower 而不是 removeChild()，但它更易于使用，并且如果您没有太多要删除的内容，它不会对性能产生太大影响。

【讨论】：

文本节点不是元素
对不起，它确实删除了所有子元素
这不适用于旧版本的 Internet Explorer。

【解决方案12】：

这是我通常做的：

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

瞧，稍后您可以使用以下命令清空任何 dom 元素：

anyDom.empty()

【讨论】：

我喜欢这个解决方案！有什么理由我应该使用它而不是把 innerHTML 设置为一个空白字符串？
性能：domEl.innerHTML = "" 很差，被认为是不好的做法

【解决方案13】：

Ecma6 让它变得简单而紧凑

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

这回答了问题，并删除“所有子节点”。

如果有属于 myNode 的文本节点，它们不能用 CSS 选择器选择，在这种情况下我们必须应用（也）：

myNode.textContent = '';

实际上最后一个可能是最快和更有效/高效的解决方案。

.textContent 比.innerText 和.innerHTML 更高效，参见：MDN

【讨论】：

【解决方案14】：

回应 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 );

这也适用于尝试访问 parentNode 时返回 null 的不在 dom 中的节点。此外，如果您需要确保在添加内容之前节点为空，这确实很有帮助。考虑下面的用例。

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

我发现这种方法在替换元素内的字符串时非常有用，如果你不确定节点将包含什么，而不用担心如何清理混乱，重新开始。

【讨论】：

有史以来最糟糕的事情。如果您用其克隆替换原始节点，您将丢失对原始节点的引用。没有一个事件处理程序和其他绑定不起作用。

【解决方案15】：

使用范围循环对我来说是最自然的：

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

根据我在 Chrome 和 Firefox 中的测量，它慢了大约 1.3 倍。在正常情况下，这可能无关紧要。

【讨论】：

【解决方案16】：

有几个选项可以实现这一目标：

最快的（）：

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

替代方案（较慢）：

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

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

Benchmark with the suggested options

【讨论】：

【解决方案17】：

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

这将删除元素内的所有节点。

【讨论】：

...因为它是不必要的复杂，并且没有解释它是如何工作的（这实际上是不明显的），我怀疑。

【解决方案18】：

innerText 是赢家！ http://jsperf.com/innerhtml-vs-removechild/133。在所有先前的测试中，父节点的内部 dom 在第一次迭代时被删除，然后将 innerHTML 或 removeChild 应用于空 div。

【讨论】：

innerText 是一个专有的 MS 东西。只是说。
很确定这是一个有缺陷的测试 - 它依赖于 box 不是作为 var 而是通过基于 id 的 DOM 查找，并且由于 while 循环多次使这个缓慢的调用它是受到处罚。

【解决方案19】：

通过 Javascript 删除节点的子节点的最简单方法

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

【讨论】：

【解决方案20】：

我看到人们在做：

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 会立即更新！

【讨论】：

好吧，我认为是否最快，一些jsperf tests 可以证明任何一种情况
出色的工作感谢这些测试。他们不包括for (var i=0... 之一。但这是我运行这些测试时得到的结果：i.imgur.com/Mn61AmI.png 所以在这三个测试中 firstNode 比 lastNode 和 innerHTML 更快，这真的很酷
我添加了测试：jsperf.com/innerhtml-vs-removechild/220 有趣的东西做 el.firstNode 方法似乎是最快的方法

【解决方案21】：

为什么我们不按照这里最简单的方法“删除”在while中循环。

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

选择父 div
在 While 循环中使用“remove”方法来消除第一个子元素，直到没有剩余。

【讨论】：

请解释您的代码行，以便其他用户了解其功能。谢谢！
@IgnacioAra 完成！

【解决方案22】：

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

【讨论】：

【解决方案23】：

通常，JavaScript 使用数组来引用 DOM 节点列表。因此，如果您有兴趣通过 HTMLElements 数组进行操作，这将很好地工作。另外，值得注意的是，因为我使用的是数组引用而不是 JavaScript proto，这应该适用于任何浏览器，包括 IE。

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

【讨论】：

【解决方案24】：

刚刚看到有人在另一个中提到这个问题，并认为我会添加一个我还没有看到的方法：

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

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

clear 函数获取元素并使用父节点将自身替换为没有子节点的副本。如果元素是稀疏的，性能提升不大，但是当元素有一堆节点时，性能提升就会实现。

【讨论】：

其实这里好像提到过stackoverflow.com/a/15441725/576767
Felix 我一定错过了，感谢您的更正 +1。

【解决方案25】：

仅功能方法：

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

domChildren 中的“childNodes” 将给出一个直接子元素的 nodeList，当没有找到时它是空的。为了映射 nodeList，domChildren 将其转换为数组。 domEmpty 将函数 domRemove 映射到所有删除它的元素上。

示例用法：

domEmpty(document.body)

从 body 元素中移除所有子元素。

【讨论】：

【解决方案26】：

ES6+浏览器（2016年后发布的主要浏览器）的最佳移除方法：

也许有很多方法可以做到这一点，例如Element.replaceChildren()。我想向您展示一个有效的解决方案，只有一次重绘和重排 支持所有 ES6+ 浏览器。

function removeChildren(cssSelector, parentNode){
    var elements = parentNode.querySelectorAll(cssSelector);
    let fragment = document.createDocumentFragment(); 
    fragment.textContent=' ';
    fragment.firstChild.replaceWith(...elements);
}

用法：removeChildren('.foo',document.body);：删除<body>中className为foo的所有元素

【讨论】：

不需要textContent 只需使用fragment.replaceChildren(...elements) 而不是fragment.firstChild.replaceWith(...elements)

【解决方案27】：

您可以从容器中删除所有子元素，如下所示：

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

现在您可以调用该函数并传递如下选择器：

如果元素有 id = foo

emptyDom('#foo');

如果元素有 class= foo

emptyDom('.foo');

如果元素有标签 = div>

emptyDom('div')

【讨论】：

【解决方案28】：

element.innerHTML = ""（或 .textContent）是到目前为止最快的解决方案

这里的大部分答案都是基于有缺陷的测试

例如： https://jsperf.com/innerhtml-vs-removechild/15
此测试不会在每次迭代之间向元素添加新的子元素。第一次迭代将删除元素的内容，然后其他所有迭代都不会执行任何操作。在这种情况下，while (box.lastChild) box.removeChild(box.lastChild) 更快，因为 box.lastChild 99% 的时间是null

这是一个正确的测试：https://jsperf.com/innerhtml-conspiracy

最后，不要使用node.parentNode.replaceChild(node.cloneNode(false), node)。这将用没有其子节点的自身副本替换节点。但是，这不会保留事件侦听器并中断对节点的任何其他引用。

【讨论】：

【解决方案29】：

如果你想清空整个父 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>

【讨论】：

【解决方案30】：

我是这样做的

data = {
    "messages": [
        [0, "userName", "message test"],
        [1, "userName1", "message test1"]
    ]
}
for (let i = 0; i < data.messages.length; i++) {
    var messageData = document.createElement('span')
    messageData.className = 'messageClass'
    messageData.innerHTML = `${data.messages[i][2]} ${'<br />'}`
    $(".messages").append(messageData)
}

$('#removeMessages').on('click', () => {
    node = $('.messages').get(0)
    while (node.firstChild) {
        node.firstChild.remove()
    }
    $('#removeMessages').toggle(500)
    $('#addMessages').toggle(500)
})

$('#addMessages').on('click', () => {
    for (let i = 0; i < data.messages.length; i++) {
        var messageData = document.createElement('span')
        messageData.className = 'messageClass'
        messageData.innerHTML = `${data.messages[i][2]} ${'<br />'}`
        $(".messages").append(messageData)
    }
    $('#addMessages').toggle(500)
    $('#removeMessages').toggle(500)
})

#addMessages{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="messages"></div>
<button type='button' id="removeMessages">Remove</button>
<button type='button' id="addMessages">Add MEssages</button>

【讨论】：

选项 1 A：清除 innerHTML。

选项 1 B：清除 textContent

选项 2 A：循环删除每个 lastChild:

选项 2 B：循环删除每个 lastElementChild：

奖励：Element.clearChildren猴子补丁：

使用现代 Javascript，与 remove!

2020 更新 - 使用 replaceChildren() API！

Ecma6 让它变得简单而紧凑

这里的大部分答案都是基于有缺陷的测试

选项 1 A：清除 `innerHTML`。

选项 1 B：清除 `textContent`

选项 2 A：循环删除每个 `lastChild`:

选项 2 B：循环删除每个 `lastElementChild`：

奖励：`Element.clearChildren`猴子补丁：

使用现代 Javascript，与 `remove`!

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