js移除子元素

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);
    }
  }
}
相关推荐
CarIise5 分钟前
CSS选择器与样式关联
前端·css·tensorflow
动词ing26 分钟前
【C语言】结构体+文件基础
c语言·开发语言·数据结构
caimouse42 分钟前
ReactOS 窗口系统分析(7):分层窗口与绘制辅助 — layered.c + draw.c
c语言·开发语言
丰锋ff1 小时前
基于 Qt 的智慧社区物业管理系统
开发语言·qt
里欧跑得慢1 小时前
CSS 模块化架构的演进:BEM、CSS Modules 到 CSS-in-JS 的反思
前端·css·flutter·web·css-in-js
夜不会漫长1 小时前
C++入门(1)
开发语言·c++·算法
IT_陈寒1 小时前
Vue的computed属性把我坑惨了,原来我一直用错姿势
前端·人工智能·后端
大鹏说大话2 小时前
从爬虫到决策引擎:大数据下自媒体如何用Python挖掘用户痛点
开发语言·爬虫·python
Niuguangshuo2 小时前
silero-vad:超轻量级开源 VAD 实践指南
开发语言·python
哭哭啼2 小时前
JAVA服务问题诊断
java·开发语言·jvm