Delete a row from a table by id

Question

I have a little problem. I have some dynamically created tables and each row has an id. I want to delete the row with the id "x".

I tried the usual method (removeChild) but it doesn't work for tables apparently.

function deleteRow(tableid, rowid)  
{   
      document.getElementById(tableid).removeChild(document.getElementById(rowid));  
}

The error I get is: Node was not found" code: "8

I also tried this:

function deleteRow(tbodyid, rowid)   
{  
      document.getElementById(tbodyid).removeChild(document.getElementById(rowid));   
}

and got the same error.

I can't use the deleteRow() method because that one needs the index of the row and I prefer not to search for the id mark the index then delete (even though if I don't find other solutions...).

Could you add an example table to test with, It could be something strange in the way the table is designed. — David Mårtensson, Feb 11 '11 at 09:20
For other people having the same problem: This is happening for the first code snippet because the parent of a in a table is *always* a , , or element. If you don't wrap your inside one of these in your HTML, the DOM will automatically insert a , and this will be the parent of your , *not the element*. So `removeChild()` called from the table element will fail. — Doin, Oct 19 '19 at 06:12

score 97 · Accepted Answer · answered Feb 11 '11 at 09:12

97

How about:

function deleteRow(rowid)  
{   
    var row = document.getElementById(rowid);
    row.parentNode.removeChild(row);
}

And, if that fails, this should really work:

function deleteRow(rowid)  
{   
    var row = document.getElementById(rowid);
    var table = row.parentNode;
    while ( table && table.tagName != 'TABLE' )
        table = table.parentNode;
    if ( !table )
        return;
    table.deleteRow(row.rowIndex);
}

answered Feb 11 '11 at 09:12

Vilx-

104,512
87
279
422

Your first choice worked great for me. I had fooled around with rowIndex without success, but it's good to see this example. – Betty Mock Dec 15 '14 at 21:20
Excellent job ( second method ) – dipenparmar12 Sep 17 '20 at 06:20
In IE7, the `removeChild(row)` method worked better for me. The table column widths remain flexible, whereas using `table.deleteRow` they get stuck. – Agostino Jun 11 '21 at 09:43
@Agostino - It's 2021. If you still need to support IE7, good luck to you, but you're on your own. Those ancient browsers were weird... – Vilx- Jun 11 '21 at 09:52

score 2 · Answer 2 · answered Feb 11 '11 at 09:11

2

And what about trying not to delete but hide that row?

answered Feb 11 '11 at 09:11

Napas

2,692
3
28
33

well... except the fact that there are about 80000 and it would work pretty bad... I check for it's existence then get data from it if it exists (I could check for display:none also but I think is faster to check undefined). – zozo Feb 11 '11 at 09:14

score 2 · Answer 3 · answered Feb 11 '11 at 09:21

From this post, try this javascript:

function removeRow(id) {
  var tr = document.getElementById(id);
  if (tr) {
    if (tr.nodeName == 'TR') {
      var tbl = tr; // Look up the hierarchy for TABLE
      while (tbl != document && tbl.nodeName != 'TABLE') {
        tbl = tbl.parentNode;
      }

      if (tbl && tbl.nodeName == 'TABLE') {
        while (tr.hasChildNodes()) {
          tr.removeChild( tr.lastChild );
        }
      tr.parentNode.removeChild( tr );
      }
    } else {
      alert( 'Specified document element is not a TR. id=' + id );
    }
  } else {
    alert( 'Specified document element is not found. id=' + id );
  }
}

I tried this javascript in a test page and it worked for me in Firefox.

score 2 · Answer 4 · edited Nov 12 '12 at 14:28

2

to Vilx-:

var table = row.parentNode;
while ( table && table.tagName != 'TABLE' )
    table = table.parentNode;

and what if row.parentNode is TBODY?

You should check it out first, and after that do while by .tBodies, probably

edited Nov 12 '12 at 14:28

SliverNinja - MSFT

31,051
11
110
173

answered Sep 07 '11 at 20:13

Yuri

37
1

score 1 · Answer 5 · answered Feb 18 '14 at 12:26

Something quick and dirty:

<script type='text/javascript'>
function del_tr(remtr)  
{   
    while((remtr.nodeName.toLowerCase())!='tr')
        remtr = remtr.parentNode;

    remtr.parentNode.removeChild(remtr);
}
function del_id(id)  
{   
        del_tr(document.getElementById(id));
}
</script>

if you place

<a href='' onclick='del_tr(this);return false;'>x</a>

anywhere within the row you want to delete, than its even working without any ids

score 0 · Answer 6 · answered Feb 11 '11 at 09:13

0

The parent of the row is not the object you think, this is what I understand from the error.
Try detecting the parent of the row first, then you can be sure what to write into getElementById part of the parent.

answered Feb 11 '11 at 09:13

Oralet

349
1
2
11

score -1 · Answer 7 · answered Apr 01 '20 at 21:10

-1

*<tr><a href="javascript:void(0);" class="remove">X</a></tr>*
<script type='text/javascript'>
  $("table").on('click', '.remove', function () {
       $(this).parent().parent('tr').remove();
  });

answered Apr 01 '20 at 21:10

ATM Fahim

31
3

Delete a row from a table by id

7 Answers7

Linked