如何用jQuery根据ID或class移除指定div的所有子节点？

原生JavaScript实现 #

通过ID定位并清空 #

如果目标div有唯一ID，直接定位后清空：

// 获取目标div元素
const targetDiv = document.getElementById('your-div-id');
// 直接清空内容
targetDiv.innerHTML = '';

如果想更彻底清理（避免innerHTML可能带来的内存泄漏，比如绑定的事件监听器未释放），可以用节点移除的方式：

const targetDiv = document.getElementById('your-div-id');
// 循环移除所有子节点
while (targetDiv.firstChild) {
  targetDiv.removeChild(targetDiv.firstChild);
}

通过Class定位并清空 #

如果是多个带相同class的div，需要遍历处理：

// 获取所有匹配class的div集合
const targetDivs = document.getElementsByClassName('your-div-class');
// 遍历每个div并清空
for (let i = 0; i < targetDivs.length; i++) {
  targetDivs[i].innerHTML = '';
}
// 也可以转成数组后用forEach遍历
Array.from(targetDivs).forEach(div => {
  while (div.firstChild) {
    div.removeChild(div.firstChild);
  }
});

jQuery实现（项目已引入jQuery时使用） #

通过ID清空 #

$('#your-div-id').empty();

通过Class清空所有匹配元素 #

$('.your-div-class').empty();

注意事项 #

• 操作前最好先判断元素是否存在，避免找不到元素时触发错误：

const targetDiv = document.getElementById('your-div-id');
if (targetDiv) {
  targetDiv.innerHTML = '';
}

• innerHTML = '' 写法简洁，但如果div内有自定义事件绑定，可能会残留内存引用；使用removeChild逐个移除子节点的方式更彻底，适合对内存要求较高的场景。

内容的提问来源于stack exchange，提问作者david22557