给定它的 id，我如何从 DOM 中删除一个元素？答案

【问题标题】：How do I remove an element from the DOM, given its id?给定它的 id，我如何从 DOM 中删除一个元素？
【发布时间】：2011-03-15 18:08:30
【问题描述】：

在这种特定情况下，元素是一个表格行。

【问题讨论】：

您至少可以展示您的 HTML 的外观，并根据 id 说明您需要删除哪一行。
@Darin：这可能不会改变答案 - 如果问题是通用的，它实际上更有用，IMO。
@Bobby，甚至不清楚 OP 的 Id 是什么意思。
@Darin - id 是“content”、“red”还是“my-elements-id”有关系吗？无论哪种方式，删除它的方法都是一样的。当然，我们不想要 1,000 多个问题，一直以来都是“如何删除 id 为 'content' 的元素？”的变体。 ...
@Bobby @Darin 具有讽刺意味的是，最少的活动来自利益相关者。

标签： javascript html dom

【解决方案1】：

未经测试，但类似：

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

或

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

【讨论】：

您不需要对父级的硬编码引用.. 您可以从行本身获取它.. row.parentNode.removeChild(row); 这样您只需要要删除的元素的 id ..

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

或者在 jQuery 中：

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

【讨论】：

【解决方案4】：

jQuery

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

如果您的行有id，这很好用，例如：

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

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

【讨论】：

这需要 jQuery 库。
是的，这需要 j-query 库，我建议使用此解决方案，因为它更适合用于干净的编码