如何使用Vanilla JS或JQuery删除指定ID范围内的表格行

你需要删除表格中从#deleteFirstRow到#deleteLastRow的所有行（包含这两行），但之前的代码逻辑完全搞反了——tr:not(...)会选中不需要删除的行并删掉，自然不符合预期。

正确的jQuery实现方式 #

直接选中要删除的行范围，再执行删除操作：

// 选中起始行到结束行之间的所有行，加上首尾两行后删除
$("#deleteFirstRow")
  .nextUntil("#deleteLastRow") // 获取起始行之后、结束行之前的所有行
  .add("#deleteFirstRow, #deleteLastRow") // 把首尾两行加入选择集
  .remove(); // 删除选中的所有行

或者更简洁的写法（效果完全一致）：

$("#deleteFirstRow").nextUntil("#deleteLastRow").addBack().add("#deleteLastRow").remove();

为什么这个方法有效 #

• nextUntil("#deleteLastRow")：获取#deleteFirstRow之后、#deleteLastRow之前的所有兄弟<tr>元素（不包含首尾两行）
• add("#deleteFirstRow, #deleteLastRow")：把需要删除的首尾两行加入到待删除的元素集合中
• 最后调用remove()就会删掉这个集合里的所有行，留下你需要保留的行，和你给出的预期表格结构完全匹配。

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