如何使用jQuery或JavaScript移除空类的span标签并保留内部内容？

这个需求的核心逻辑是：将目标标签的所有子节点（含纯文本节点）移动到原标签在父DOM中的位置，再删除已经清空的目标标签，全程不会出现内容丢失、布局错位，也不会破坏已绑定的DOM事件。

原生JavaScript实现 #

• 实现思路：
  • 选中匹配规则的目标span（对应需求里class为空的span，匹配选择器为span[class=""]）
  • 遍历所有目标span，将其内部所有子节点逐个插入到span原本所在的位置
  • 等所有内部内容完全移出后，删除空的span元素
• 可直接运行的参考代码：

// 匹配所有class属性为空的span
const targetSpans = document.querySelectorAll('span[class=""]');
targetSpans.forEach(span => {
  const parent = span.parentNode;
  // 循环搬出所有子节点，包含纯文本、嵌套的其他标签
  while (span.firstChild) {
    parent.insertBefore(span.firstChild, span);
  }
  // 移除空的span标签
  parent.removeChild(span);
});

jQuery实现 #

• jQuery可以用内置方法简化代码，这里有个容易踩的坑：必须用contents()获取所有子节点，不能用children()，因为children()只会返回元素级子节点，会漏掉span内部的纯文本内容（比如需求里的"TEST"文本）
• 可直接运行的参考代码：

$('span[class=""]').each(function() {
  // 将span内部所有节点移动到span的当前位置，再删除空span
  $(this).before($(this).contents()).remove();
});

常见踩坑提醒 #

• 不要用直接替换innerHTML/outerHTML的方式实现，比如span.outerHTML = span.innerHTML这种写法虽然代码短，但会重新解析生成全新DOM节点，原节点上绑定的事件、嵌套输入框的已输入内容都会完全丢失，在复杂页面中很容易引发隐藏bug
• 这套实现逻辑对span内部的内容类型没有限制：不管是纯文本、嵌套其他行内/块级标签，都可以完整保留，不会出现位置偏移
• 如果需要匹配的目标span有其他规则（比如带特定data属性、固定文本内容），只需要调整第一步的元素选择器即可，后续的移除逻辑完全通用

实际处理效果对比：
处理前DOM结构：<p>前缀文字 <span class="">TEST</span> 后缀文字</p>
处理后DOM结构：<p>前缀文字 TEST 后缀文字</p>

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