Question

我查看了很多关于这段简单代码的论坛帖子。并尝试了许多变化和方法，没有任何工作。

我有一个基于数据库查询构建表的脚本。我将其限制为10个结果，并提供前进和后退按钮以转到数据库中的其他结果。当您按下下一个按钮时，我需要它删除所有当前表行，以便它可以使用查询的新结果重新创建它们。我使用以下代码删除行;

if (document.getElementsByClassName('shiftTrRow')) {
    table = document.getElementById('resultsTable')
    deleteRow = document.getElementsByClassName('shiftTrRow');
    table.removeChild(deleteRow);       
}

我使用if case来检查是否有要删除的行，我添加了一个警告来测试是否有行已发现并且这有效。

当我运行代码时，我在行上收到以下错误：

table.removeChild(deleteRow)

Uncaught Error: NOT_FOUND_ERR: DOM Exception 8

我查找了错误代码并解释了找不到该元素，但事实并非如此，因为只有找到该元素才会执行此代码。如果有人知道我做错了什么或者更好的方法，我会非常感激。

Answer 1

document.getElementsByClassName将返回NodeList，而不是单个节点。您需要从该列表中选择一个节点，例如document.getElementsByClassName('shiftTrRow')[0]。

还要确保节点实际上是给定表的子节点。以下代码更安全一点：

if (document.getElementsByClassName('shiftTrRow'))
{    
    deleteRow = document.getElementsByClassName('shiftTrRow')[0];

    if(deleteRow.parentNode)
        deleteRow.parentNode.removeChild(deleteRow);
}

Answer 2

document.getElementsByClassName('shiftTrRow')
                   ^

返回NodeList，即元素数组。您需要循环遍历它们并自行删除它们（但请注意，该集合是实时的，并且在删除元素时会缩小）。

此外，getElementsByClassName可能会返回根本不包含该表行的元素，从而导致您收到NOT FOUND例外。

但是，从表中删除行的最简单方法是deleteRow method：

var table = document.getElementById('resultsTable');
while (table.rows.length > 0)
    table.deleteRow(0);

Answer 3

document.getElementsByClassName返回一个元素数组。 table.removeChild期望一个DOM元素，而不是一个数组。

按类名删除表行 - Javascript

3 个答案: