有没有办法在单个函数中删除 JavaScript 中的多个 HTML 元素？答案

【问题标题】：Is there a way to delete multiple HTML elements in JavaScript in a single function?有没有办法在单个函数中删除 JavaScript 中的多个 HTML 元素？
【发布时间】：2022-01-07 09:07:50
【问题描述】：

我目前正在处理一个项目，我必须在其中创建和删除多个 HTML 元素。创建它们很容易。我写了一个小函数来完成工作。问题是我必须删除一些元素，remove() 函数似乎是在浪费时间和代码行。有没有办法巧妙地删除它们？

我想删除这个函数在一个

中创建的所有元素

function createHTMLElement(elemHTML, elemId, perentElem, elemValue) {
    var elem = document.createElement(elemHTML);
    elem.id = elemId;
    perentElem.appendChild(elem);
    elem.innerHTML = elemValue;
}

function game() {

    // Erstellen des "Levelbildschirms"
    // Textseite
    createHTMLElement("div", "perentTextAndDialogDiv", hauptdiv, null)
    createHTMLElement("div", "gameTextContainer", perentTextAndDialogDiv, null);
    createHTMLElement("h1", "gameTextHeader", gameTextContainer, "Tutorial");
    createHTMLElement("p", "gameText", gameTextContainer, "Hier steht langer text der sehr lang wird.");

    // Buttons für die Antworten
    createHTMLElement("div", "gameDialogContainer", perentTextAndDialogDiv, null)
    createHTMLElement("button", "answerButton1", gameDialogContainer, "Möglichkeit 1");
    createHTMLElement("button", "answerButton2", gameDialogContainer, "Möglichkeit 2");
    createHTMLElement("button", "answerButton3", gameDialogContainer, "Möglichkeit 3");
    answerButton1.className = "answerKnopf";
    answerButton2.className = "answerKnopf";
    answerButton3.className = "answerKnopf";

    // einfügen der Bilder
    createHTMLElement("div", "divanny", hauptdiv, null);
    createHTMLElement("div", "gameImageContainer", divanny, null);
    createHTMLElement("img", "testImage", gameImageContainer, null)
    testImage.src = "media/1x1MAINBREAD.png";

    // Hud elements
    createHTMLElement("div", "charStats", divanny, null);
    createHTMLElement("ul", "statsList", charStats, null)
    createHTMLElement("p", "statsTextHp", statsList, "HP: " + internalDataBase["hp"] + "/10");
    createHTMLElement("p", "statsTextAtk", statsList, "Angriffswert: " + internalDataBase["attackstat"]);
    createHTMLElement("p", "statsTextMoney", statsList, "Geld: " + internalDataBase["money"] + "€$");
    //InventarButton
    createHTMLElement("div", "InventoryKnopfContainer", divanny, null)
    createHTMLElement("button", "InverntoryKnopf", InventoryKnopfContainer, "Inventar")
    InverntoryKnopf.onclick = inventory();
}

【问题讨论】：

题外话，您可以查看custom element 的用例。这样，您就可以更轻松地创建自定义元素。

标签： javascript html

【解决方案1】：

只需将创建的元素添加到数组中，然后一次性删除它们。

所以：

function createHTMLElement(elemHTML, elemId, perentElem, elemValue) {
    var elem = document.createElement(elemHTML);
    elem.id = elemId;
    perentElem.appendChild(elem);
    elem.innerHTML = elemValue;
//add this
    return elem;
}

然后当你创建它们时：

let newElements = [];

function game()
{
  newElements.push(createHTMLElement("div", "perentTextAndDialogDiv", hauptdiv, null));
}

因此，要删除它们，您需要以下内容：

function clearNewElements()
{
  for(let el of newElements)
  {
    el.parentElement.removeChild(el);
  }
  
  newElements = [];
}

【讨论】：