Question

我有一个div#parent元素，其中包含几千个兄弟姐妹div#1，div#2，div#3，如下所示：

<div id="parent">
  <div id="1"> </div>
  <div id="2"> </div>  
  <div id="3"> </div>  
  …
  …
  …
  <div id="N"> </div>
</div>

删除父节点的所有子节点的最佳方法是什么 - 最好是异步或通过单独的进程？

以下是Here处理慢速和快速的一些标准答案，但不是async /e̶f̶f̶i̶c̶i̶e̶n̶t̶l̶y̶或非阻塞：

选项1 ：

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

选项2 ：

let parentNode = document.getElementById("parent");
while (parentNode.firstChild) {
    parentNode.removeChild(parentNode.firstChild);
}

由于while-loop在dom的单线程环境中给出了“忙状态”，我想知道是否有可能异步删除dom中的节点/e̶̶̶f̶̶̶f̶̶̶i̶̶̶c̶̶̶i̶̶̶e̶̶̶n̶̶̶t̶̶̶l̶̶̶y̶或非阻止时尚？

Answer 1

显然innerHTML = ''会同时删除所有项目。如果这个太慢并且你想要一点一点地删除元素，那么你需要类似于你的第二种方法。

let parentNode = document.getElementById("parent");
(function remove() {
  // Remove elements in groups of 100
  for(let i=0; i<100 && parentNode.firstChild; ++i) {
    parentNode.removeChild(parentNode.firstChild);
  }
  // Continue asynchronously after 50ms
  setTimeout(remove, 50);
})();

根据需要调整组大小和时间延迟。

异步删除DOM元素的子元素？

1 个答案: