javascript - 当页面加载时超时调用时，removeChild 不起作用

Question

我有一个 HTML div，应该保存动态生成的子元素。所述子项将在设定的时间(例如 1000 毫秒)后从列表中删除。

我见过有人对超时函数的范围有疑问，但我不认为就是这样。

function pushAlert(type, text) {
    let newItem;

    // newItem gets generated here.

    alertList.innerHTML += newItem;

    setTimeout(() => {
        popAlert();
    }, 1000);

}

function popAlert(e) {
    if (e) {
        alertList.removeChild(e);
    } else {
        alertList.removeChild(alertList.firstChild); <!-- gets here but doesn't remove the child. console.log on alertList and alertList.firstChild displays the proper elements. -->
    }
}

pushAlert 每次都会起作用。

popAlert 适用于页面加载后调用 pushAlert 的情况。

<script src='../js/alerts.js'></script>
<script>
pushAlert('info', 'info');
</script>

如果我像这样调用pushAlert，则应该调用popAlert的超时有效，但popAlert不会删除子项。但是，如果我从表单提交事件中调用pushAlert，则一切正常，包括超时的popAlert。

编辑:gif 显示问题的可视化 https://i.gyazo.com/aa3dc08af016450c7082482ec34a277c.mp4

Answer 1

使用.firstElementChild .

.firstChild 将获得第一个子元素，可以是 node of any type .

.firstElementChild 只会获取第一个子节点，它是元素类型的节点。

为了说明这一点，您可以单击下面代码片段中的两个按钮来查看响应:

firstChild.addEventListener('click', removeFirstChild);
firstElementChild.addEventListener('click', removeFirstElementChild);

function removeFirstChild(){
  alertList.removeChild(alertList.firstChild);
}

function removeFirstElementChild(){
  alertList.removeChild(alertList.firstElementChild);
}

<div id="alertList">
  <p>This is paragraph 0.</p>
  <p>This is paragraph 1.</p>
  <p>This is paragraph 2.</p>
</div>

<button id="firstChild">firstChild</button>
<button id="firstElementChild">firstElementChild</button>