Question

原谅原始问题。我想使用removeChild在HTML表中动态删除行。我按照教程here进行了操作，但仍然无法使用。这是我正在做的事情的一个例子。我得到的错误是：

NotFoundError: Node was not found

代码和脚本：

＆＃13;

var currentRow=document.getElementById("row-2");
var table = document.getElementById("data-table");
table.removeChild(currentRow);

＆＃13;

<html>
      <head>
        <meta charset="UTF-8">
      </head>
    
      <body id="body">
        <table align="center" cellspacing=1 cellpadding=1 id="data-table" border=1 class="data-table">
          <tr id="head" class="head">
            <td class="head">A</td>
            <td class="head">B</td>
            <td class="head">C</td>
          </tr>
    
           <tr id="row-1" class="head">
            <td class="head" id="col1-1">A1</td>
            <td class="head" id="col2-1">B1</td>
            <td class="head" id="col3-1">C1</td>
          </tr>
    	  
    	  <tr id="row-2" class="head">
            <td class="head" id="col1-2">A2</td>
            <td class="head" id="col2-2">B2</td>
            <td class="head" id="col3-2">C2</td>
          </tr>
        </table>
      </body>
    </html>

＆＃13;

Answer 1

现代浏览器在tr元素中包含tbody，因此您的代码无效。

您可以使用parentNode获取对tbody的引用，然后将其删除。

＆＃13;

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

＆＃13;

<table align="center" cellspacing=1 cellpadding=1 id="data-table" border=1 class="data-table">
  <tr id="head" class="head">
    <td class="head">A</td>
    <td class="head">B</td>
    <td class="head">C</td>
  </tr>

  <tr id="row-1" class="head">
    <td class="head" id="col1-1">A1</td>
    <td class="head" id="col2-1">B1</td>
    <td class="head" id="col3-1">C1</td>
  </tr>

  <tr id="row-2" class="head">
    <td class="head" id="col1-2">A2</td>
    <td class="head" id="col2-2">B2</td>
    <td class="head" id="col3-2">C2</td>
  </tr>

</table>

＆＃13;

Answer 2

表行不是<table>元素的子元素。即使标记中没有<tbody>，DOM也会像以下一样构建：

<table>
  <tbody>
    <tr>

因此，您需要查找该行的<tbody>父级，并将其从中删除。

通常，为了从DOM中删除元素，不需要显式查找元素的父元素，因为所有元素都具有引用父元素的.parent属性。因此，您可以随时使用

someElement.parent.removeChild(someElement)

删除someElement。在你的情况下：

currentRow = document.getElementById("row-2");
currentRow.parent.removeChild(currentRow);

请注意，除了<tbody>之外，还有<thead>和<tfoot>个表格部分。然而，唯一隐含添加的是<tbody>。

Answer 3

问题是，即使你的代码有：

<table align="center" cellspacing=1 cellpadding=1 id="data-table" border=1 class="data-table">
  <tr id="head" class="head">
    <td class="head">A</td>
    <td class="head">B</td>
    <td class="head">C</td>
  </tr>

  <tr id="row-1" class="head">
    <td class="head" id="col1-1">A1</td>
    <td class="head" id="col2-1">B1</td>
    <td class="head" id="col3-1">C1</td>
  </tr>

  <tr id="row-2" class="head">
    <td class="head" id="col1-2">A2</td>
    <td class="head" id="col2-2">B2</td>
    <td class="head" id="col3-2">C2</td>
  </tr>

</table>
<script>
  var currentRow=document.getElementById("row-2");
  var table = document.getElementById("data-table");
  table.removeChild(currentRow);
</script>

在实际渲染中，它会被<tbody>转换。使用Inspect Element检查。简单来说，你可以这样做：

<table align="center" cellspacing=1 cellpadding=1 id="data-table" border=1 class="data-table">
  <tr id="head" class="head">
    <td class="head">A</td>
    <td class="head">B</td>
    <td class="head">C</td>
  </tr>

  <tr id="row-1" class="head">
    <td class="head" id="col1-1">A1</td>
    <td class="head" id="col2-1">B1</td>
    <td class="head" id="col3-1">C1</td>
  </tr>

  <tr id="row-2" class="head">
    <td class="head" id="col1-2">A2</td>
    <td class="head" id="col2-2">B2</td>
    <td class="head" id="col3-2">C2</td>
  </tr>

</table>
<script>
  var currentRow = document.getElementById("row-2");
  currentRow.parentNode.removeChild(currentRow);
</script>

＆＃13;

<table align="center" cellspacing=1 cellpadding=1 id="data-table" border=1 class="data-table">
  <tr id="head" class="head">
    <td class="head">A</td>
    <td class="head">B</td>
    <td class="head">C</td>
  </tr>

  <tr id="row-1" class="head">
    <td class="head" id="col1-1">A1</td>
    <td class="head" id="col2-1">B1</td>
    <td class="head" id="col3-1">C1</td>
  </tr>

  <tr id="row-2" class="head">
    <td class="head" id="col1-2">A2</td>
    <td class="head" id="col2-2">B2</td>
    <td class="head" id="col3-2">C2</td>
  </tr>

</table>
<script>
  var currentRow = document.getElementById("row-2");
  currentRow.parentNode.removeChild(currentRow);
</script>

＆＃13;

Answer 4

您必须从父母那里removeChild。

幸运的是，在每个元素上都有对父元素的引用，因此您可以使用它：

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

这样可以节省一些额外的代码并且易于阅读。

无法使removeChild正常工作

4 个答案: