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>

什么是最好的方法

我可以删除一个tr，如下所示：

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

但是它只会删除以下内容：

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

如何删除特定tr下的所有tr。

Answer 1

您可以将nextAll()用于该结果。

您首先需要获取<tr>元素，其中包含具有类removeFromHere的元素
然后，您可以使用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>

Answer 2

您可以在大于选择器:gt()的帮助下使用索引来实现以下目的：

//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>

Answer 3

使用

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

将无济于事，因为td的父母只是一个特定的tr。我不使用jQuery，所以我不太了解语法，但是请尝试使用

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

Answer 4

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

这将删除所选行之后的所有行...

Answer 5

给表一个ID，然后尝试删除最后一个表行，直到到达特定的表行。

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

然后您删除特定的tr。

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>

如何在jQuery中删除特定表格行下方的所有表格行

6 个答案: