Question

I have a html table like this:

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

I want to remove 2 tr elements at once something like this:

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

But after first iteration table.removeChild(tr) returns null, so I can’t get tr.nextSibling(tr).

Please help me.

Answer 1

You should temporary save a reference to the next row, as shwn below. Also, to select the tbody, you have to use 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);
}

An alternative, universal solution:

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