TypeError: Failed to execute ‘removeChild‘ on ‘Node‘: parameter 1 is not of type ‘Node‘.
JS动态删除，for中慎用带有i的元素。
·
目的：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动态删除多个节点报错原因理解
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)