我正在尝试在特定的超时(等待动画完成)之后从特定类的DOM中删除所有元素。
我尝试过在实时列表(getElmentsByClassName)和节点列表(querySelectorAll)上都使用for循环。在这两种情况下,仅删除一个元素。
function removeElems() {
elems = document.querySelectorAll('.header');
for (e of elems) {
setTimeout(function() {e.remove();}, 1000);
}
}
<div id="container">
<div class="header">1</div>
<div class="header">2</div>
<div class="header">3</div>
<div class="header">4</div>
<div class="header">5</div>
<div class="header">6</div>
</div>
我不确定为什么它不起作用,并且正在寻找一个解释,为什么它以它的方式执行并且实际上并未删除所有元素。
谢谢!
(如果您愿意提供工作代码示例,请仅使用Vanilla JS。)
答案 0 :(得分:2)
一种选择是将setTimeout
上的变量e
(元素)作为第三个参数传递。
function removeElems() {
let elems = document.querySelectorAll('.header');
for (const e of elems) {
setTimeout(function(o) { //2. Receive the element in variable o
o.remove(); //3. Remove the o variable
}, 1000, e); //1. Pass the element here
}
}
removeElems();
<div id="container">
<div class="header">1</div>
<div class="header">2</div>
<div class="header">3</div>
<div class="header">4</div>
<div class="header">5</div>
<div class="header">6</div>
</div>
答案 1 :(得分:2)
好吧,如果您使用.setFontSmoothingType()
或let
正确声明了变量,它将得到修复,因为const
的作用域是循环的每次迭代。
e
但是,这些多个setTimeout调用是多余的。只需将循环移动到单个回调即可。
function removeElems() {
const elems = document.querySelectorAll('.header');
for (const e of elems) {
setTimeout(function() {e.remove();}, 1000);
}
}
答案 2 :(得分:0)
您可以使用forEach遍历所有标题
function removeElems() {
const parent = document.getElementById('container');
const elems = document.querySelectorAll('.header');
elems.forEach((node) => {
setTimeout(function() {
parent.removeChild(node);
}, 1000);
});
}
答案 3 :(得分:0)
查看您发布的当前代码:
function removeElems() {
elems = document.querySelectorAll('.header');
for(e of elems) {
setTimeout(function() {
console.log(e);
e.remove();
}, 1000 );
}
}
removeElems();
<div id="container">
<div class="header">1</div>
<div class="header">2</div>
<div class="header">3</div>
<div class="header">4</div>
<div class="header">5</div>
<div class="header">6</div>
</div>
请注意,e
仅在呼叫最后一个header
。
您可以使用以下内容:
function removeElems() {
elems = document.querySelectorAll('.header');
for(let i = 0; i < elems.length; i++) {
setTimeout(function() {
elems[i].remove();
}, 1000 );
}
}
removeElems();
<div id="container">
<div class="header">1</div>
<div class="header">2</div>
<div class="header">3</div>
<div class="header">4</div>
<div class="header">5</div>
<div class="header">6</div>
</div>
删除所有延迟后的内容。或者:
var i = 0;
var elems = document.querySelectorAll('.header');
function removeElems() {
if( i < elems.length) {
setTimeout(function() {
elems[i].remove();
i++;
removeElems();
}, 1000 );
}
}
removeElems();
<div id="container">
<div class="header">1</div>
<div class="header">2</div>
<div class="header">3</div>
<div class="header">4</div>
<div class="header">5</div>
<div class="header">6</div>
</div>
从第一个元素开始将元素1删除。
或者从最后开始:
var elems = document.querySelectorAll('.header');
var i = elems.length-1;
function removeElems() {
if( i >= 0) {
setTimeout(function() {
elems[i].remove();
i--;
removeElems();
}, 1000 );
}
}
removeElems();
<div id="container">
<div class="header">1</div>
<div class="header">2</div>
<div class="header">3</div>
<div class="header">4</div>
<div class="header">5</div>
<div class="header">6</div>
</div>