Dynamisches HTML Element löschen

Question

Ich habe einen Container

<div id="container">
    <div><a href="#" id="addLink">Neues Element</a></div>
</div>

und hänge mit Javascript neue Elemente an.

const addLink = document.getElementById("addLink");
const container = document.getElementById("container");

addLink.addEventListener("click", function(event) {
    
    event.preventDefault();
    
    const newDiv = document.createElement("div");
    newDiv.textContent = "Neues Element";

    container.appendChild(newDiv);
    
});

Wie kann ich ein bestimmtes Element davon wieder löschen?

Answer 1

Du kannst einen zusätzlichen Button zum löschen erstellen.

<div id="container">
 <div>
  <a href="#" id="addLink">Neues Element hinzufügen</a>
 </div>
 <div>
  <button id="deleteButton">Letztes Element löschen</button>
 </div>
</div>

Und einen Event Handler dazu.

const deleteButton = document.getElementById("deleteButton");

deleteButton.addEventListener("click", function() {
    const childElements = container.children;

    // Überprüfen, ob es Elemente zum Löschen gibt
    if (childElements.length > 1) {
        const lastElement = childElements[childElements.length - 1];
        container.removeChild(lastElement);
    } else {
         // Es gibt keine Elemente zum Löschen
    }
});

Comments

Danke aber das bedeutet ich kann immer nur den letzten wieder löschen. Ich würde aber gerne jeden einzelnen löschen können.

---

Dann könntest du jedem Element eine unique ID geben und anhand dieser das Element löschen.

Answer 2

Du könntest jedem hinzugefügten Element einen zusätzlichen Löschen Button únd einen eigenen EventListener hinzufügen. Demo

const addLink = document.getElementById("addLink");
const container = document.getElementById("container");

addLink.addEventListener("click", function(event) {
    event.preventDefault();

    const newDiv = document.createElement("div");
    const deleteButton = document.createElement("button");

    newDiv.textContent = "Neues Element";
    deleteButton.textContent = "Löschen";
    
    // Event-Listener für das Löschen des aktuellen Elements
    deleteButton.addEventListener("click", function() {
        container.removeChild(newDiv);
    });

    newDiv.appendChild(deleteButton);
    container.appendChild(newDiv);
});

Comments

Super danke genauso hab ich mir das vorgestellt :-)