How do I remove an element from the DOM, given its id?

Question

In this specific case, the element is a table row.

You could have at least shown how your HTML looks like and explain which row you need to delete based on what id. — Darin Dimitrov, Jul 14 '10 at 09:10
@Darin: That probably wouldn't alter the answer - it's actually more useful if the question is generic, IMO. — Bobby Jack, Jul 14 '10 at 09:15
@Darin - does it matter if the id is "content", "red", or "my-elements-id"? Any which way, the method for removing it is exactly the same. Surely we don't want 1,000s of questions, all along the variant of "How do I remove an element with an id of 'content'?" ... — Bobby Jack, Jul 14 '10 at 09:31
@Bobby, yes it does matter as it is not clear whether he is talking about the `id` attribute of a `tr` or some value stored inside for example the third `` in this row. Depending on this the answers will be fundamentally different. See my point? Programming is an **exact** science. — Darin Dimitrov, Jul 14 '10 at 09:40
Yes, I (and everyone else who's answered this question) assumed the asker meant the id attribute, rather than anything else. I think that's hugely likely, although I agree that it was badly worded (which is why I edited the question). If we've all got the wrong end of the stick, I'm sure the asker will come back and correct us. — Bobby Jack, Jul 14 '10 at 10:02
@Bobby @Darin Ironically, the least activity has come from the stakeholder. — George Marian, Jul 14 '10 at 12:03

score 6 · Answer 1 · answered Jul 14 '10 at 09:11

6

Untested but something like:

var tbl = document.getElementById('tableID');
var row = document.getElementById('rowID');
tbl.removeChild(row);

or

var row = document.getElementById('rowID');
row.parentNode.removeChild(row);

answered Jul 14 '10 at 09:11

Fermin

34,961
21
83
129

6

You don't need a hardcoded reference to the parent.. you can get it from the row itself.. `row.parentNode.removeChild(row);` This way you only need the id of the element you want to remove .. – Gabriele Petrioli Jul 14 '10 at 09:15

score 4 · Answer 2 · answered Jul 14 '10 at 09:13

4

var row = document.getElementById("row-id");
row.parentNode.removeChild(row);

answered Jul 14 '10 at 09:13

Bobby Jack

15,689
15
65
97

score 2 · Answer 3 · answered Jul 14 '10 at 09:12

2

var zTag = document.getElementById ('TableRowID');
zTag.parentNode.removeChild (zTag);

Or in jQuery:

$('#TableRowID').remove ();

answered Jul 14 '10 at 09:12

Brock Adams

90,639
22
233
295

Pranay Rana · Answer 4 · 2010-07-14T09:21:32.470

Jquery

$('#myTableRow').remove();

This works fine if your row has an id, such as:

<tr id="myTableRow"><td>blah</td></tr>

Pure Javascript :

Javascript Remove Row From Table

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 &amp;&amp; tbl.nodeName != 'TABLE') {
        tbl = tbl.parentNode;
      }

      if (tbl &amp;&amp; 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 );
  }
}

yes this require j-query library i suggest this solution becuase its better to use for clean coding — Pranay Rana, Jul 14 '10 at 09:13

How do I remove an element from the DOM, given its id?

4 Answers4