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?

Probably, when you delete a row, the indexes of the rows go down. Try: `table.deleteRow(0);` — acdcjunior, Apr 28 '13 at 01:38

score 38 · Accepted Answer · answered Apr 28 '13 at 01:39

38

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);
}

answered Apr 28 '13 at 01:39

xdazz

158,678
38
247
274

Helps to visualize these things or walk through it diagrammatically in pseudo code :) But yeah, that's an oversight one tends not to make more than once! – clearlight Jan 01 '17 at 08:14

score 5 · Answer 2 · answered Apr 28 '13 at 01:40

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.

Arun · Answer 3 · 2013-04-28T01:50:13.943

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);
}

score 3 · Answer 4 · answered Apr 28 '13 at 01:39

3

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

answered Apr 28 '13 at 01:39

Niet the Dark Absol

320,036
81
464
592

really your method is very good but at the both side if "1" put then without header clean the table data. – Virbhadrasinh Jan 06 '15 at 06:47

score 3 · Answer 5 · answered Jan 01 '17 at 07:13

3

You could just go:

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

answered Jan 01 '17 at 07:13

DISSONANCE

33
3

Add some explanation with answer for how this answer help OP in fixing current issue – ρяσѕρєя K Jan 01 '17 at 07:34
I found rows added by javascript were not accessible by the OP's method. Solved my problem by setting the innerHTML="" instead of deleting rows via the dom. Haven't tested this properly, – CodingMatters Aug 18 '22 at 23:35
If deleting rows is all that matters then this method is efficiently the best. It didn't even occur to me at first. LOL. – Romeo Sep 01 '22 at 15:54

Musa · Answer 6 · 2013-04-28T01:44:50.063

2

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);
    }
}

edited Apr 28 '13 at 01:44

answered Apr 28 '13 at 01:38

Musa

96,336
17
118
137

score 0 · Answer 7 · answered Dec 04 '14 at 07:38

0

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

answered Dec 04 '14 at 07:38

IMRUP

1,463
2
11
17

dinesh782 · Answer 8 · 2015-05-27T02:48:00.463

-2

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

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

edited May 27 '15 at 02:48

answered Oct 28 '14 at 02:20

dinesh782

15
3

Deleting table rows in javascript

8 Answers8

Linked