Search code examples
javascriptdomclientsettimeout

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


Here is the code in question:

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

So the expected functionality is that the p goes into the holder, and in 500ms it gets removed. Yet the p element stays forever, even though I can confirm that the element is not null. What's going on?


Solution

  • Since firstChild Node bight well be a #text Node

    Either use .firstElementChild or rather simply: p.remove()

    Example:

    // 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>