如何清空div下所有子元素但保留指定ID的元素？

我懂你的困扰啦——你当前的代码只是清空了目标元素的内容，但那些空标签还留在DOM结构里，这显然不是你想要的结果。咱们来调整一下：

问题根源 #

你使用的empty()方法，作用是清空选中元素的内部内容，但元素本身依然会保留在DOM中，所以才会留下一堆空的div标签。

正确代码 #

我们需要换成remove()方法，它会把选中的元素从DOM中彻底删除，而不是只清空内容：

$(document).on('click', '#button', function(){ 
  $("#mainDiv > *:not(#divToKeep)").remove(); 
})

额外说明 #

• 选择器细节：:not()中的选择器不需要加引号，直接写#divToKeep就可以，这样更符合jQuery选择器的规范。
• 这个方法只会移除mainDiv下的直接子元素中除了divToKeep之外的所有元素，divToKeep本身以及它内部的内容都会完整保留下来。

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