clear createElement from page using removeChild

Question

I am trying to figure out how I can clear the <p> elements that are generated from a for loop before the for loop starts.

Essentially. I have a webpage where someone searches something and a list of results are shown. However if I search for something else, the new results get appended instead of clearing the old results first.

Here is the code:

async function parseitglinkquery() {
    var queriedresults = await getitglinkquery();
    console.log(queriedresults);
    const output = document.querySelector('span.ms-font-mitglue');
    output.removeChild("createditginfo"); \\tried to clear the <pre> here and it failed
    for (let i = 0; i < queriedresults.length; i++) {

        let text = "Company: " + JSON.stringify(queriedresults[i]["data"]["attributes"].organization-name) + "<br>"+
        "Name: " + JSON.stringify(queriedresults[i]["data"]["attributes"].name) + "<br>" +
        "Username: " + JSON.stringify(queriedresults[i]["data"]["attributes"].username).replace("\\\\","\\") + "<br>" +
        "Password: " + JSON.stringify(queriedresults[i]["data"]["attributes"].password);
        let pre = document.createElement('p');
        pre.setAttribute("id", "createditginfo")
        pre.innerHTML = text;
        pre.style.cssText += 'font-size:24px;font-weight:bold;';
        output.appendChild(pre);  
    console.log(typeof pre)    
    }
}

I tried to create a try and catch block where it would try to clear the <p> using removeChild() but that didn't seem to work either.

async function parseitglinkquery() {
    var queriedresults = await getitglinkquery();
    console.log(queriedresults);
    const output = document.querySelector('span.ms-font-mitglue');
    try {
        output.removeChild("createditginfo");
    }
    catch(err){
        console.log(err)
    }
    for (let i = 0; i < queriedresults.length; i++) {

        let text = "Company: " + JSON.stringify(queriedresults[i]["data"]["attributes"].organization-name) + "<br>"+
        "Name: " + JSON.stringify(queriedresults[i]["data"]["attributes"].name) + "<br>" +
        "Username: " + JSON.stringify(queriedresults[i]["data"]["attributes"].username).replace("\\\\","\\") + "<br>" +
        "Password: " + JSON.stringify(queriedresults[i]["data"]["attributes"].password);
        let pre = document.createElement('p');
        pre.setAttribute("id", "createditginfo")
        pre.innerHTML = text;
        pre.style.cssText += 'font-size:24px;font-weight:bold;';
        output.appendChild(pre);  
    console.log(typeof pre)    
    }
}

Answer 1

You only have to clear the output-node right before the loop using the innerHTML-property.

output.innerHTML = '';

• https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

There are other ways too, if you want to remove only specific childs. You can make use of Node.childNodes together with a loop. With this, you have the opportunity to remove only specific children.

[...output.childNodes].forEach(childNode => {
  output.removeChild(childNode)
});
// or specific
[...output.childNodes].forEach(childNode => {
   // remove only <div>-nodes
   if (childNode.nodeName == 'DIV') {
     childNode.remove();
   }
});

• https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes
• https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild
• https://developer.mozilla.org/en-US/docs/Web/API/Element/remove