如何移除HTML中含class-one类的span标签并保留文本？

这里有几种可靠的方案，不管你用原生JavaScript还是jQuery都能轻松搞定需求：

方法1：原生JavaScript（无第三方依赖） #

思路很直接：先选中所有目标span元素，再逐个用它们的文本内容替换掉自身标签，完全不影响其他元素结构。

// 获取所有class为class-one的span元素
const targetSpans = document.querySelectorAll('span.class-one');

// 遍历每个元素，用文本内容替换标签
targetSpans.forEach(span => {
  const textContent = document.createTextNode(span.textContent);
  span.replaceWith(textContent);
});

如果需要兼容旧版浏览器（比如IE），可以用parentNode.replaceChild()替代replaceWith()：

targetSpans.forEach(span => {
  const textContent = document.createTextNode(span.textContent);
  span.parentNode.replaceChild(textContent, span);
});

方法2：jQuery（项目已引入jQuery时使用） #

如果你的项目已经在用jQuery，代码会更简洁：

$('span.class-one').replaceWith(function() {
  // 返回当前span的文本内容，用于替换标签
  return $(this).text();
});

执行上述任意一种方法后，你会得到预期的输出：

This is a string and I want to remove spans with the class class-one.

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