在 JavaScript 中删除 DOM 节点的所有子元素 [英] Remove all child elements of a DOM node in JavaScript

查看：31
本文介绍了在 JavaScript 中删除 DOM 节点的所有子元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我将如何在 JavaScript 中移除 DOM 节点的所有子元素?

假设我有以下(丑陋的)HTML:

<span>你好</span><div>世界</div></p>

然后我像这样抓取我想要的节点:

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

我怎样才能删除 foo 的孩子，以便只剩下 <p id="foo"></p> ?

我可以这样做吗:

myNode.childNodes = new Array();

还是我应该使用 removeElement 的某种组合?

我希望答案是直接的 DOM；如果您还提供 jQuery 中的答案以及仅 DOM 的答案，则可以加分.

解决方案

Option 1 A: Clearing innerHTML.

  • 这种方法很简单，但可能不适合高性能应用程序，因为它会调用浏览器的 HTML 解析器(尽管浏览器可能针对值为空字符串的情况进行了优化).

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

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;"><span>你好</span>

<button id='doFoo'>通过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>你好</span>

<button id='doFoo'>通过 textContent 删除</button>

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

  • 对此答案的较早编辑使用了 firstChild，但已更新为在计算机科学中使用 lastChild，一般来说，它是删除集合的最后一个元素比删除第一个元素要快得多(取决于集合的实现方式).
  • 循环继续检查 firstChild 以防万一检查 firstChild 比检查 lastChild (例如，如果元素列表由 UA 实现为有向链表).

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

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;"><span>你好</span>

<button id='doFoo'>通过lastChild-loop删除</button>

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

  • 这种方法保留了所有非 Element(即 #text 节点和 )子节点父级(但不是其后代)- 这在您的应用程序中可能是可取的(例如，某些使用内联 HTML 注释来存储模板指令的模板系统).
  • 这种方法直到最近几年才被使用，因为 Internet Explorer 仅在 IE9 中添加了对 lastElementChild 的支持.

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

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;"><!-- 此评论不会被删除--><span>您好<!-- 此评论将被删除--></span><!-- 但这个不会.-->

<button id='doFoo'>通过lastElementChild-loop删除</button>

奖励:Element.clearChildren 猴子补丁:

if( typeof Element.prototype.clearChildren === 'undefined' ) {Object.defineProperty(Element.prototype, 'clearChildren', {可配置:真，可枚举:假，值:函数(){while(this.firstChild) this.removeChild(this.lastChild);}});}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;"><span>您好<!-- 此评论将被删除--></span>

<button onclick="this.previousElementSibling.clearChildren()">通过monkey-patch删除</button>

How would I go about removing all of the child elements of a DOM node in JavaScript?

Say I have the following (ugly) HTML:

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

And I grab the node I want like so:

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

How could I remove the children of foo so that just <p id="foo"></p> is left?

Could I just do:

myNode.childNodes = new Array();

or should I be using some combination of removeElement?

I'd like the answer to be straight up DOM; though extra points if you also provide an answer in jQuery along with the DOM-only answer.

解决方案

Option 1 A: Clearing innerHTML.

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>

Option 1 B: Clearing textContent

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>

Option 2 A: Looping to remove every lastChild:

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>

Option 2 B: Looping to remove every 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>

Bonus: Element.clearChildren monkey-patch:

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>

这篇关于在 JavaScript 中删除 DOM 节点的所有子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆