js移除子元素 - 技术栈

js移除子元素

Wxinin2024-03-29 22:06

javascript 复制代码

removeAllChild(parentId) {
  const parentNode = document.getElementById(parentId);
  if (parentNode) {
    parentNode.innerHTML = '';
  }
}

使用innerHTML属性将其设为空字符串，可以一次性清除该元素的所有子节点内容。但是需要注意的是，innerHTML会触发重排和重绘，如果是大量DOM操作，性能消耗可能较大。如果只需要删除子节点而不需要保留原有DOM树结构或者触发事件，这种方法更为简洁高效。

如果需要保持原有的DOM树结构或者关心性能，原始的while循环是一个更好的选择。若要优化原始循环，可以尝试使用childNodes迭代器配合for循环：

javascript 复制代码

removeAllChild(parentId) {
  const parentNode = document.getElementById(parentId);
  if (parentNode) {
    for (let child; (child = parentNode.firstChild);) {
      parentNode.removeChild(child);
    }
  }
}