意外自动插入 tbody 元素:table 不是 row.parentElement

Question

检查这个简单的表格：

const table = document.getElementById("table");
table.addEventListener('click', e => {
if (e.target.tagName === 'BUTTON') {
const affectedRow = e.target.closest('tr');
table.removeChild(affectedRow);
}
});

<table border="1" id="table">
<tr>
<td>row A</td>
<td><button>delete row</button></td>
</tr>
<tr>
<td>row B</td>
<td><button>delete row</button></td>
</tr>
<tr>
<td>row C</td>
<td><button>delete row</button></td>
</tr>
</table>

尝试使用table.removeChild(affectedRow)删除一行给了我

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

是否必须使用tbody元素？

为什么浏览器会自动插入tbody元素？我检查了 validator.w3.org，省略tbody标签似乎是有效的 HTML。

如何在不使用HTMLTableElement.prototype.deleteRow(index)的情况下删除行，仅使用HTMLElement.prototype方法和属性？

Answer 1

您可以检查表下面是否有 tbody 元素，如果是，请改为从该元素下方删除行：

const table = document.getElementById("table");
const tbody = (table.firstElementChild.nodeName == 'TBODY' ? table.firstElementChild : table);
table.addEventListener('click', e => {
if (e.target.tagName === 'BUTTON') {
const affectedRow = e.target.closest('tr');
tbody.removeChild(affectedRow);
}
});

<table border="1" id="table">
<tr>
<td>row A</td>
<td><button>delete row</button></td>
</tr>
<tr>
<td>row B</td>
<td><button>delete row</button></td>
</tr>
<tr>
<td>row C</td>
<td><button>delete row</button></td>
</tr>
</table>

Answer 2

使用这种方式table.tBodies[0].removeChild

为什么？

tbody，thead和tfoot被所有浏览器插入，即使是冠军IE也这样做，这是W3c规范。

HTML 表正文元素 (

tbody) 封装一组表行(tr 元素)，指示它们包含表(表)的正文，类似于表的页眉和页脚。

Answer 3

许多浏览器会向HTML表添加<tbody>元素(如果不存在)。您可以在这篇文章中阅读更多关于原因的信息：为什么浏览器将 tbody 元素插入表元素？

removeChild()只会删除子项，而不会删除后代。因此，如果存在<tbody>，则您尝试删除的<tr>是<tbody>的子元素，而不是<table>元素的子元素。

你可以做：

document.querySelector("#table tbody").removeChild(affectedRow);