如何使用jQuery移除table、行、单元格标签但保留内部内容

• 需求：移除页面中所有table、tr、th、td表格相关标签，完整保留标签内部的文本、其他元素内容
• 失效尝试：使用$("table").contents().unwrap();执行后未达到预期效果

测试用的初始代码如下：

// 失效的尝试代码
$("table").contents().unwrap();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

unwrap()方法只会移除选中元素集合的直接父级标签，上述代码仅选中了table的直接子节点（即tr元素）执行unwrap，只能去掉最外层的table标签，内部嵌套的tr、th、td标签完全没有被处理，自然达不到移除所有表格标签的效果。

jQuery 实现（推荐） #

直接匹配所有表格相关标签，将标签本身替换为其内部的内容，不需要考虑嵌套层级，一次执行即可完成需求：

$("table, tr, th, td").replaceWith(function() {
  return $(this).contents();
});

如果坚持使用unwrap()实现，需要从最内层的标签开始，逐层向外执行解包裹，顺序不能颠倒：

// 先处理最内层的单元格
$("th, td").contents().unwrap();
// 再处理行标签
$("tr").contents().unwrap();
// 最后处理最外层表格标签
$("table").contents().unwrap();

原生JS实现（无需jQuery） #

不需要引入jQuery也可以实现同等效果，兼容性覆盖所有主流浏览器：

document.querySelectorAll('table, tr, th, td').forEach(el => {
  // 将当前元素的所有子节点移动到元素同级位置
  while (el.firstChild) {
    el.parentNode.insertBefore(el.firstChild, el);
  }
  // 移除空的表格标签
  el.remove();
});

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