如何移除div内span元素以外的所有内容（含id为items的div空文本）

嘿，针对你的两个问题，其实用一行jQuery代码就能一次性搞定，完美匹配你「保留#items里的<span>元素、移除其余所有内容（包括空文本节点）」的需求。

核心实现代码 #

直接用这行代码就能达到目的：

$('#items').contents(':not(span)').remove();

代码逻辑解释 #

• $('#items')：精准选中id为items的目标div元素
• .contents()：获取该元素下所有子节点——包括文本节点、注释节点这类普通.children()不会捕获的内容
• :not(span)：筛选出所有不是<span>标签的节点
• .remove()：把筛选出来的非目标节点全部移除

不管是空文本、无关标签还是注释，都会被清理干净，最终只留下你需要的<span>元素。

完整可运行示例 #

如果要在页面中实际使用，记得先引入jQuery库，示例代码如下：

<!-- 先引入jQuery库 -->
<script src="jquery.min.js"></script>

<div id="items" class="w3-xxlarge">
  这是会被移除的冗余文本
  <span class="target-span">我是要保留的span内容</span>
  <!-- 这是会被移除的注释节点 -->
  <div>这是会被移除的其他标签</div>
</div>

<script>
// 页面加载完成后执行清理操作
$(function() {
  $('#items').contents(':not(span)').remove();
});
</script>

执行后，#items容器内就只会剩下你要保留的<span>元素啦。

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