如果只有一个元素，removeChild 在 setTimeout 中不起作用

Question

这里是有问题的代码：

        var p = document.createElement("p");
        holder.appendChild(p);
        setTimeout(function(){
            if (holder.firstChild != null){
                holder.removeChild(holder.firstChild);
            }
        },500);

所以预期的功能是 p 进入持有人，并在 500 毫秒内被删除。然而 p 元素永远存在，即使我可以确认该元素不为空。怎么回事？

Answer 1

因为 firstChild 节点很可能是 #text 节点

要么使用 .firstElementChild，要么 简单地 ： p.remove()

示例：

// DOM utility functions:

const find = (sel, parent) => (parent ||document).querySelector(sel);
const create = (tag, props) => Object.assign(document.createElement(tag), props);

// Task:

const elHolder = find("#holder");
const elP = create("p", {textContent: "I will get removed soon!"});

elHolder.append(elP);
setTimeout(() => {
  elP.remove();
}, 1000);

<div id="holder"></div>

如果只有一个元素，removeChild 在 setTimeout 中不起作用

removeChild does not work in a setTimeout if there is one element

javascript

dom

client

settimeout