Как удалить все строки таблицы ниже определенной строки таблицы в 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 () селектор.Вы можете сослаться на документ на 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>

Answer 2

Дайте вашей таблице идентификатор, затем попробуйте удалить последнюю строку таблицы, пока не достигнете конкретной строки таблицы.

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

Затем вы удалите конкретную строку.

Answer 3

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

Это удалит все строки после выбранной строки ...

Answer 4

использование

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

не поможет, потому что родитель td - это только один конкретный tr.Я не использую jQuery, поэтому я не знаю синтаксис, но попробуйте использовать

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

Answer 5

Вы можете использовать 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 6

Вы можете использовать индексы с помощью селектора больше, чем :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>