CODEWITHSUNDEEP
javascripthtmldomrow
zozo
zozo

Reputation: 8592

Delete a row from a table by id

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

Upvotes: 34

Views: 127471

Answers (7)

ATM Fahim
ATM Fahim

Reputation: 51

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

Upvotes: -1

Oliver Zendel
Oliver Zendel

Reputation: 2901

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

Upvotes: 1

Yuri
Yuri

Reputation: 37

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

Upvotes: 2

rsbarro
rsbarro

Reputation: 27349

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.

Upvotes: 2

Oralet
Oralet

Reputation: 347

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.

Upvotes: 0

Vilx-
Vilx-

Reputation: 106940

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

Upvotes: 98

Napas
Napas

Reputation: 2811

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

Upvotes: 2

Related Questions