javascript - JS:用for循环删除多个子节点?
问题描述
我想执行一个迭代元素的子节点并随后删除每个子节点的函数。
在我当前的设置中,出于某种原因,只有一些子节点被删除,有些则没有。该函数需要多次运行才能删除所有节点。为什么不是一次删除所有节点?
这是代码的简化版本:
const deleteBtn = document.getElementById("deleteBtn");
const sidebar = document.getElementById("sidebar");
deleteBtn.addEventListener("click", () => {
const links = sidebar.children;
console.log(links)
for (let i = 0; i < links.length; i++) {
const link = links[i];
link.remove()
}
})
.sidebar__link-group {
display: flex;
flex-direction: column;
}
<button id="deleteBtn" >Click to delete all links</button>
<div id="sidebar" class="sidebar__link-group">
<a class="sidebar__link" href="#">Some link</a>
<a class="sidebar__link" href="#">Some link</a>
<a class="sidebar__link" href="#">Some link</a>
<a class="sidebar__link" href="#">Some link</a>
<a class="sidebar__link" href="#">Some link</a>
<a class="sidebar__link" href="#">Some link</a>
</div>
解决方案
当您删除第 0 个元素时,第 1 个元素变为第 0 个,第 2 个元素变为第 1 个,依此类推,所以在您的第一个 i++ 之后,您将删除“原始 2nd”元素,依此类推;这就是为什么您的算法只删除所有其他孩子而不是每个孩子。
这通常是您想要使用 awhile
而不是数组迭代的算法:
const deleteBtn = document.getElementById("deleteBtn");
const sidebar = document.getElementById("sidebar");
deleteBtn.addEventListener("click", () => {
while(sidebar.children.length > 0) {
sidebar.children[0].remove();
}
console.log('done');
})
.sidebar__link-group {
display: flex;
flex-direction: column;
}
<button id="deleteBtn" >Click to delete all links</button>
<div id="sidebar" class="sidebar__link-group">
<a class="sidebar__link" href="#">Some link</a>
<a class="sidebar__link" href="#">Some link</a>
<a class="sidebar__link" href="#">Some link</a>
<a class="sidebar__link" href="#">Some link</a>
<a class="sidebar__link" href="#">Some link</a>
<a class="sidebar__link" href="#">Some link</a>
</div>
推荐阅读
- c# - 使用 NUnit 对隐式运算符进行单元测试
- excel - 将目标线添加到数据透视图
- python-3.x - Python3:在win10上使用OpenCV模拟本地网络摄像头设备
- python - 网页抓取时如何搜索特定的Unicode字符串?
- java - 如何在给定的 html 元素中使用 xpath 进行搜索?
- macos - 终端看不到或找不到 dms 文件
- clojurescript - 如何防止闭包编译器缩小 clojurescript 中的某些方法?
- python - Matplotlib 自动轴给出了意想不到的结果
- c# - 如何:将结果添加到与登录相同的数据库
- google-cloud-sql - 错误:(gcloud.sql.export.sql)HTTPError 409:操作失败,因为另一个操作已经在进行中