javascript - 使用 removeChild 从页面中清除 createElement

Question

我想知道如何清除 <p>在 for 循环开始之前从 for 循环生成的元素。

本质上。我有一个网页，有人在其中搜索内容并显示结果列表。但是，如果我搜索其他内容，则会附加新结果，而不是先清除旧结果。

代码如下:

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)    
    }
}

我试图创建一个 try和 catch阻止它试图清除 <p> 的地方使用 removeChild()但这似乎也不起作用。

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

您只需在循环之前使用 innerHTML 属性清除输出节点。

output.innerHTML = '';

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

如果您只想删除特定的 child ，还有其他方法。您可以将 Node.childNodes 与循环一起使用。有了这个，您就有机会只删除特定的 child 。

[...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