javascript - 在纯 JavaScript 中一一删除 childElements

Question

我有:

<div id="alerts">
    <div class="alert">alert 1</div>
    <div class="alert">alert 2</div>
</div>

并且希望在纯 JavaScript中4000 毫秒后以间隔 500 毫秒的方式逐一删除这些警报。 p>

我有这个:

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 的正确方法。

Answer 1

getElementsByClassName返回 live collection这意味着当 dom 中删除或更改所选元素时，引用的集合也会更改。

因此，在您的示例中，当您启动 alert 时，有 2 个 elemnet，但是当删除第一个元素时，alert 将只有 1 个元素，但您指的是 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>