如何使用jQuery移除第一个<a>标签至<table>标签间的所有内容？

嘿，这问题我熟！你之前用nextUntil没成功，是因为它默认只匹配元素节点，那些没被标签包裹的文本节点根本没被选中，自然删不掉。我给你两种靠谱的解决方案，都能搞定文本节点的问题：

方法一：精准截取节点范围（推荐） #

这个方法直接获取容器内的所有节点（包括文本、元素、注释），然后精准截取从第一个<a>到<table>之前的部分移除：

// 定位目标容器
const $myDiv = $('.MyDiv');
// 获取容器内所有节点（含文本、元素）
const allNodes = $myDiv.contents();
// 找到第一个<a>的位置
const firstAIndex = allNodes.index($myDiv.find('a').first());
// 找到<table>的位置
const tableIndex = allNodes.index($myDiv.find('table'));
// 截取并移除中间的所有节点
allNodes.slice(firstAIndex, tableIndex).remove();

方法二：遍历兄弟节点逐个移除 #

如果更喜欢遍历的思路，可以从第一个<a>开始，逐个检查后续兄弟节点，直到遇到<table>就停止：

const $firstA = $('.MyDiv a').first();
// 包括第一个<a>本身，遍历所有后续兄弟节点
$firstA.nextAll().addBack().each(function() {
  const $current = $(this);
  // 遇到table就终止遍历
  if ($current.is('table')) {
    return false;
  }
  // 移除当前节点
  $current.remove();
});

验证效果 #

运行上述代码后，你的HTML会变成你期望的样子：

<div class="MyDiv">
 <div>div1</div>
 <div>div2</div>
 <div>div3</div>
 <table><tr><td>table</td></tr></table>
</div>

为什么之前的方法不行？简单说：nextUntil()默认只筛选元素节点，那些游离的文本节点不属于任何元素，所以不会被选中。上面的两种方法都覆盖了文本节点的处理，完美解决你的需求～

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