Deleting table rows in javascript

Question

I'm having trouble with a function in javascript and can't figure out why. It's really quite straight forward. I'm trying to delete all the rows in a html table. so I wrote:

function delete_gameboard(){
   var table = document.getElementById("gameboard");
   var rowCount = table.rows.length;
   for (var i = 0; i < rowCount; i++) {
      table.deleteRow(i);
   }
}

Yet, it'll only delete half of them. Can anyone see what's causing this strange behavior?

Answer 1

Because when you delete the first row, the second row will become the first, it's dynamic.

You could do like:

while(table.rows.length > 0) {
  table.deleteRow(0);
}

Answer 2

Consider this:

index 0:  row #1
index 1:  row #2
index 2:  row #3
index 3:  row #4
index 4:  row #5

you delete index #2 (row #3), so the DOM engine adjusts the index keys and you end up with:

index 0:  row #1
index 1:  row #2
index 2:  row #4   <---hey! index #2 is still there
index 3:  row #5

You're basically digging a hole in the spot where you're standing, so as you dig deeper, you naturally sink deeper and never see any progress... until you run out of rows to delete in the table.

Answer 3

function delete_gameboard(){
var table = document.getElementById("gameboard");
var rowCount = table.rows.length;
for (var i=rowcount-1; i >=0; i--) {
    table.deleteRow(i);
}
}

The index of the row changes when you delete it. Use a reverse loop. This will also be helpful if you are using any condition to delete rows. If you are deleting all rows,use the following

while(table.rows.length) {
  table.deleteRow(0);
}

Answer 4

If you delete the first row, the second row becomes the new first row.

I prefer to do this:

while(table.rows[0]) table.deleteRow(0);

Answer 5

The table rows is live, that is if you delete row 0 then the next row becomes row 0, just constantly delete row 0

function delete_gameboard(){
    var table = document.getElementById("gameboard");
    var rowCount = table.rows.length;
    for (var i=0; i < rowCount; i++) {
        table.deleteRow(0);
    }
}

Answer 6

You could just go:

    document.getElementById("gameboard").innerHTML = "";

Answer 7

function delRow()
  {
    var current = window.event.srcElement;
    //here we will delete the line
    while ( (current = current.parentElement)  && current.tagName !="TR");
    current.parentElement.removeChild(current);
  }

Answer 8

If you are using JQuery in your code then the easiest way to delete the rows is using the following code:

$('#myTable tbody').html('');