Как удалить два элемента tr?

Question

У меня есть html-таблица, подобная этой:

 <table>
   <tr id='first'>
      <td>text</td>
   </tr>
   <tr>
      <td>text</td>
   </tr>
   <tr>
      <td>text</td>
   </tr>     
 </table>

Я хочу удалить сразу 2 элемента tr примерно так:

 <script>
    var tr = document.getElementById('first'),
        table = document.getElementsByTagName('table')[0],
        i=0;

    do {
      tr = table.tbody.removeChild(tr);
    } while ((tr = tr.nextSibling(tr)) && i++<2);
 </script>

Но после первой итерации table.removeChild(tr) возвращаетnull, поэтому я не могу получить tr.nextSibling(tr).

Пожалуйста, помогите мне.

Answer 1

Вы должны временно сохранить ссылку на следующую строку, как показано ниже.Также для выбора tbody необходимо использовать tBodies[0].

var nextrow = document.getElementById('first'),
    table = document.getElementsByTagName('table')[0],
    i=0, tr;
while (nextrow && i++<2) {
  tr = nextrow;
  nextrow = tr.nextSibling;
  table.tbodies[0].removeChild(tr);
}

Альтернативное универсальное решение:

var nextrow = document.getElementById('first'),
    i=0, tr;
while (nextrow && i++<2) {
  tr = nextrow;
  nextrow = tr.nextSibling;
  tr.parentNode.removeChild(tr);
}

Answer 2

это также работает:

    var trs = document.getElementsByTagName("tr");
    for(var i = 1; i < trs.length; i++){
        trs[i].parentNode.removeChild(trs[i]);
        i--;
    }

Answer 3

Может быть, вам следует определить следующий tr для удаления перед удалением текущего tr.