在 pure JavaScript 中一个接一个地删除 childElements
Remove childElements one-by-one in pure JavaScript
我有:
<div id="alerts">
<div class="alert">alert 1</div>
<div class="alert">alert 2</div>
</div>
并希望在 4000 毫秒后 以 500 毫秒 的间隔 一个接一个地删除这些警报]纯JavaScript.
我有这个:
window.onload = function(){
alerts = document.getElementById( 'alerts' );
if( alerts ){
alert = alerts.getElementsByClassName( 'alert' );
setTimeout( function(){
for( var i=0; i < alert.length; i++ ){
( function( i ){
setTimeout( function(){
alerts.removeChild( alert[i] );
}, 500);
}
)(i);
}
}, 4000);
}
}
我认为这不是使用 setTimeout
的正确方法。
getElementsByClassName returns a live collection 这意味着当在 dom 中删除或更改所选元素时,引用的集合也会更改。
所以在你的例子中,当你开始时 alert
有 2 个元素,但是当第一个元素被删除时,alert
将只有一个元素,但你指的是 alert[1]
这将是未定义的。
因此解决方案是从数组中删除第一个元素。
window.onload = function() {
var alerts = document.getElementById('alerts');
if (alerts) {
alert = alerts.getElementsByClassName('alert');
setTimeout(function() {
for (var i = 0; i < alert.length; i++) {
(function(i) {
setTimeout(function() {
alerts.removeChild(alert[0]);
}, i * 500); //need increasing timeouts
})(i);
}
}, 4000);
}
}
<div id="alerts">
<div class="alert">alert 1</div>
<div class="alert">alert 2</div>
</div>
但是你可以使用 setInterval() 以更好的方式解决这个问题,比如
window.onload = function() {
var alerts = document.getElementById('alerts');
if (alerts) {
var alert = alerts.getElementsByClassName('alert');
setTimeout(function() {
var interval = setInterval(function() {
alerts.removeChild(alert[0]);
if (!alert.length) {
clearInterval(interval)
}
}, 1000);
}, 3000);
}
}
<div id="alerts">
<div class="alert">alert 1</div>
<div class="alert">alert 2</div>
</div>
更简单的方法是使用 setInterval
window.onload = function() {
alerts = document.getElementById('alerts');
if (alerts) {
alert = alerts.getElementsByClassName('alert');
var interval = setInterval(function() {
if (alert.length) {
alerts.removeChild(alert[alert.length - 1]);
} else {
clearInterval(interval);
}
}, 4000);
}
}
<div id="alerts">
<div class="alert">alert 1</div>
<div class="alert">alert 2</div>
</div>
我有:
<div id="alerts">
<div class="alert">alert 1</div>
<div class="alert">alert 2</div>
</div>
并希望在 4000 毫秒后 以 500 毫秒 的间隔 一个接一个地删除这些警报]纯JavaScript.
我有这个:
window.onload = function(){
alerts = document.getElementById( 'alerts' );
if( alerts ){
alert = alerts.getElementsByClassName( 'alert' );
setTimeout( function(){
for( var i=0; i < alert.length; i++ ){
( function( i ){
setTimeout( function(){
alerts.removeChild( alert[i] );
}, 500);
}
)(i);
}
}, 4000);
}
}
我认为这不是使用 setTimeout
的正确方法。
getElementsByClassName returns a live collection 这意味着当在 dom 中删除或更改所选元素时,引用的集合也会更改。
所以在你的例子中,当你开始时 alert
有 2 个元素,但是当第一个元素被删除时,alert
将只有一个元素,但你指的是 alert[1]
这将是未定义的。
因此解决方案是从数组中删除第一个元素。
window.onload = function() {
var alerts = document.getElementById('alerts');
if (alerts) {
alert = alerts.getElementsByClassName('alert');
setTimeout(function() {
for (var i = 0; i < alert.length; i++) {
(function(i) {
setTimeout(function() {
alerts.removeChild(alert[0]);
}, i * 500); //need increasing timeouts
})(i);
}
}, 4000);
}
}
<div id="alerts">
<div class="alert">alert 1</div>
<div class="alert">alert 2</div>
</div>
但是你可以使用 setInterval() 以更好的方式解决这个问题,比如
window.onload = function() {
var alerts = document.getElementById('alerts');
if (alerts) {
var alert = alerts.getElementsByClassName('alert');
setTimeout(function() {
var interval = setInterval(function() {
alerts.removeChild(alert[0]);
if (!alert.length) {
clearInterval(interval)
}
}, 1000);
}, 3000);
}
}
<div id="alerts">
<div class="alert">alert 1</div>
<div class="alert">alert 2</div>
</div>
更简单的方法是使用 setInterval
window.onload = function() {
alerts = document.getElementById('alerts');
if (alerts) {
alert = alerts.getElementsByClassName('alert');
var interval = setInterval(function() {
if (alert.length) {
alerts.removeChild(alert[alert.length - 1]);
} else {
clearInterval(interval);
}
}, 4000);
}
}
<div id="alerts">
<div class="alert">alert 1</div>
<div class="alert">alert 2</div>
</div>