TypeError: Failed to execute ‘removeChild‘ on ‘Node‘: parameter 1 is not of type ‘Node‘.

最新推荐文章于 2024-07-14 20:54:37 发布

Sudaa__

最新推荐文章于 2024-07-14 20:54:37 发布

阅读量4.2k

点赞数 1

分类专栏：前端文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_44755885/article/details/127397535

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

目的：JS 动态表格，读取数据创建表格，点击删除单元格删除该行。

问题：删除时，删除第一行后，再删除第二行会造成第三行删除，并且最终剩下的一行无法删除。

原因：`tbody.removeChild(tbody.children[i])` 中每次删除后，tbody.children[i] 的值就变成了删除前的tbody.children[i+1]。

解决方案：改为 `tbody.removeChild(this.parentNode);`

代码如下：

<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>

        <tbody>

        </tbody>
    </table>
    <script>
        var datas = [
            {
                name: '张三',
                subject: 'JS',
                score: 90
            }, {
                name: '李四',
                subject: 'JS',
                score: 80
            }, {
                name: '王五',
                subject: 'JS',
                score: 70
            }, {
                name: '赵六',
                subject: 'JS',
                score: 60
            }
        ];
        var tbody = document.querySelector('tbody');
        for (let i = 0; i < datas.length; i++) {
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            for (let k in datas[i]) {
                var td = document.createElement('td');
                td.innerText = datas[i][k];
                tbody.children[i].appendChild(td)
            }
            var td2 = document.createElement('td');
            td2.innerText = '删除';
            tbody.children[i].appendChild(td2);
        }

        for (let i = 0; i < tbody.children.length; i++) {
            tbody.children[i].children[3].onclick = function () {
                // tbody.removeChild(tbody.children[i]);    //WRONG!!
                tbody.removeChild(this.parentNode);         //RIGHT
            }
        }
    </script>
</body>

详细分析&参考：通过DOM动态删除多个节点报错原因理解