如何刪除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>

做這個的最好方式是什么

我可以刪除一個如下所示的tr：

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

但它只會刪除以下內容：

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

如何刪除特定tr下面的所有tr 。

Answer 1

您可以對該結果使用nextAll() 。

1. 首先需要獲取<tr>元素，其中包含類removeFromHere的元素
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> 

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>