如何使用jQuery删除特定表格行下方的所有表格行

Question

这是我的表格：

<table>
    <tbody>
        <tr>
            <td>1</td>
        </tr>
        <tr>
            <td>2</td>
        </tr>
        <tr>
            <td class="removeFromHere">remove all below tr</td>
        </tr>
        <tr>
            <td>remove 1</td>
        </tr>
        <tr>
            <td>remove  2</td>
        </tr>
        <tr>
            <td>remove 3</td>
        </tr>
        <tr>
            <td>remove 4</td>
        </tr>
    </tbody>
</table>

我想删除以下所有表格行：

以下是要删除的表格行

 <td class="removeFromHere">remove all below tr</td>

什么是最好的方法来做到这一点？

我可以像以下这样删除一个：

如何最好地做到这一点？

我可以按照以下方式移除其中一个：

$('.removeFromHere').parent().remove();

但它只会删除以下内容：

 <td class="removeFromHere">remove all below tr</td>

如何删除特定下的所有。

- user10249871

Answer 1

您可以使用nextAll()方法实现这个结果。

1. 首先，您需要获取包含 class 为 removeFromHere 的元素的 <tr> 元素。
2. 然后，您可以使用 nextAll() 方法删除其后面的所有 <tr> 元素。

$('.removeFromHere').closest('tr').nextAll('tr').remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td class="removeFromHere">remove all below tr</td>
    </tr>
    <tr>
      <td>remove 1</td>
    </tr>
    <tr>
      <td>remove 2</td>
    </tr>
    <tr>
      <td>remove 3</td>
    </tr>
    <tr>
      <td>remove 4</td>
    </tr>
  </tbody>
</table>

- Ankit Agarwal

Answer 2

You could use index's with the help of greater than selector :gt() to achieve that like :

//Get the index of the target tr with class `removeFromHere`
var target_index = $('tr').index($('.removeFromHere').parent());

//Get all the tr's with index greater than 'target_index' then remove them
$('table').find("tr:gt(" + target_index + ")").remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td class="removeFromHere">remove all below tr</td>
    </tr>
    <tr>
      <td>remove 1</td>
    </tr>
    <tr>
      <td>remove 2</td>
    </tr>
    <tr>
      <td>remove 3</td>
    </tr>
    <tr>
      <td>remove 4</td>
    </tr>
  </tbody>
</table>

- Zakaria Acharki

---

你真的需要更多的积分来回答这么简单的问题吗，哈哈。 - imBlue

@imBlue，关键不在于问题的简单或困难。对于提问者和后续参考来说，答案的质量才是最重要的。 - Lelio Faieta

@imBlue，对你来说可能很简单的问题，但对于我们这些没有你聪明的人来说可能并不容易。 - user10249871

Answer 3

使用

$('.removeFromHere').parent().remove();

不起作用，因为 td 的父元素只是一个特定的 tr。

我不使用 jQuery 所以不太清楚它的语法，但可以尝试使用

while($('.removeFromHere')parent().next()) {
   $('.removeFromHere')parent().next().remove()
}

- Piotr Słowik

Answer 4

$('.removeFromHere').parent().nextAll().remove();

这将会移除选定行之后的所有行...

- Nico Bleiler

Answer 5

给你的表格一个ID，然后尝试删除最后一行直到达到你想要的表格行。

$('#table tr:last').remove();

然后您删除特定的 tr。

- user10200035

Answer 6

简单来说，您可以使用 nextAll() 选择器。您可以在 https://api.jquery.com/nextAll/ 文档中查看相关信息。

以下是例子：

$(document).ready(function() {
  $('.removeFromHere').parent().nextAll("tr").remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td class="removeFromHere">remove all below tr</td>
    </tr>
    <tr>
      <td>remove 1</td>
    </tr>
    <tr>
      <td>remove 2</td>
    </tr>
    <tr>
      <td>remove 3</td>
    </tr>
    <tr>
      <td>remove 4</td>
    </tr>
  </tbody>
</table>

- Jitendra G2