Is there a way to delete multiple HTML elements in JavaScript in a single function?

I am currently working on a project, where I have to create and delete multiple HTML elements. Creating them is easy. I wrote a small function that gets the job done. The problem is I have to remove some of the elements and the remove() function seems to be a waste of time and lines of code. Is there a way to delete them cleverly?

I want to remove the entire elements that this function has created in an

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

Solution 1:

Simply add the created elements to an array, then remove them all at once.

So:

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

Then when you're creating them:

let newElements = [];

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

So, to remove them you need something like:

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