从页面加载超时中调用时，removeChild不起作用

Question

I've got a HTML div that is supposed to hold dynamically generated children. Said children are to be removed from the list after a set amount of time (eg 1000 ms).

I've seen people having issues about the scope in a timeout function but I don't think that's it.

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 works every time.

popAlert works for times when pushAlert was called after page load.

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

If I call pushAlert like this, the timeout that is supposed to call popAlert works, but popAlert does not remove the child. But if I call pushAlert from the event of a form submit, everything works properly, including the timeout-ed popAlert.

EDIT: gif showing a visualization of the issue https://i.gyazo.com/aa3dc08af016450c7082482ec34a277c.mp4

Answer 1

Use .firstElementChild .

.firstChild will get first child which can be a node of any type .

.firstElementChild will only get the first child which is a node of element type.

To illustrate, you can click the two buttons in the snippet below to see the response:

 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>