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);
    }
  }
}
相关推荐
Taiyuuki4 分钟前
WebGPU 开发者福音!在 VS Code 中实时预览你的WGSL着色器作品
前端·gpu·图形学
带土113 分钟前
6. C++智能指针(1)
开发语言·c++
李剑一18 分钟前
uni-app实现网络离线定位
前端·trae
鲨莎分不晴19 分钟前
Nginx 部署前端项目实战指南
运维·前端·nginx
海南java第二人20 分钟前
SpringBoot启动流程深度解析:从入口到容器就绪的完整机制
java·开发语言
星火开发设计24 分钟前
C++ queue 全面解析与实战指南
java·开发语言·数据结构·c++·学习·知识·队列
码界奇点28 分钟前
基于Vue3与TypeScript的后台管理系统设计与实现
前端·javascript·typescript·vue·毕业设计·源代码管理
DICOM医学影像32 分钟前
2. go语言从零实现以太坊客户端-查询区块链账户余额
开发语言·golang·区块链·以太坊·web3.0·hardhat
ashcn200133 分钟前
水滴按钮解析
前端·javascript·css
攀登的牵牛花34 分钟前
前端向架构突围系列 - 框架设计(五):契约继承原则
前端·架构