Auf Element zugreifen welches per AppendChild hinzugefügt wurde

Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

Nico.Milano

Grünschnabel
Guten Abend Ihr lieben,

ich stehe aktuell an einem für mich unlösbaren Problem.

Ich habe eine Liste welcher ich Einträge hinzufügen kann, diese werden per appendChild auch hinzugefügt das klappt alles wunderbar. Ich gebe jedem Eintrag auch einen Button mit der Klasse "löschen" mit der Button soll zum Löschen des Eintrages dienen.

Folgend meine hinzufügen Funktion
Javascript:
HinzuButton.addEventListener("click", NeuerEintrag);
// Element hinzufügen
function NeuerEintrag() {
    var Eingabefeld = document.getElementById("Eingabefeld");
    var AppFensterListe = document.getElementById("app-fenster-liste");
    var li = document.createElement("li");
    // Prüfung ob Eingabefeld leer ist.
    if ((document.getElementById("Eingabefeld").value == "") || (document.getElementById("Eingabefeld").value.trim().length === 0)) {
        alert("Gib bitte eine ToDo ein!");
    } else {
        //Hinzufügen eines Classname zum erstellen li Element
        li.setAttribute("class", "ToDoElement");

        // Hinzufügen des ToDo Text als Listen Element
        li.appendChild(document.createTextNode(Eingabefeld.value));
        AppFensterListe.appendChild(li);
       
        //Eingabefeld Leer nach durchgeführten Eintrag
        Eingabefeld.value = "";
       
        //------------ Löschen Button zu jedem Eintrag ------------
        var loeschenKnopf = document.createElement("button");
        loeschenKnopf.appendChild(document.createTextNode("Loeschen"));
        loeschenKnopf.setAttribute("class", "Loeschen");
        li.appendChild(loeschenKnopf);

Wenn ich jetzt aber einen EventListener erstelle der den Löschbutton auslösen soll erhalte ich immer dass der Buttonname keine Funktion ist. Ich verstehe auch warum es so ist, das zu löschende Element existiert noch garnicht also auch der Button noch nicht jedoch wird es schon versucht aufzurufen bzw. anzuzeigen, jedoch selbst wenn der Eintrag existiert und der Button vorhanden ist klappt es nicht.
Wenn ich händisch eine ul und ein li eingebe und exakt die selbe Löschbutton funktion benutze nur mit den angepassten ids/klassen dann funktioniert es ohne Probleme. Es hat wirklich mit meinen appendChild Einträgen zu tun.
Wenn ich in den Quellcode schaue "Quellode anzeigen" wird mir der li Eintrag + Button nicht angezeigt, wenn ich über untersuchen gehe dann natürlich schon. Hat es damit zu tun?

Javascript:
//Der Button mit der Loeschen Klasse erscheint erst wenn ein Eintrag durchgeführt wird.
//Beim Laden der Seite erhalte ich schon die Meldung "Uncaught TypeError: LoeschButton.addEventListener is not a function"

var LoeschButton = document.getElementsByClassName("Loeschen");
    var AppFensterListe = document.getElementById("app-fenster-liste");
    var ToDoElemente = document.getElementsByClassName("ToDoElement");           

    LoeschButton.addEventListener("click", LoeschenElement);

    function LoeschenElement() {
        AppFensterListe.removeChild(ToDoElemente);
    }

Habt Ihr so ein Problem schonmal gehabt oder wüsstest was man da machen kann?
Habe bereits versucht mit einer schleife zu prüfen ob das Element existiert und wenn ja soll die löschen Funktion durchgeführt werden aber leider hat auch das nicht geklappt.

Ich hoffe ich konnte erklären was mein Problem ist.

Vielen Dank schonmal im Vorfeld.
 

Sempervivum

Erfahrenes Mitglied
Ja, das ist ein gängiges Problem wenn Elemente dynamisch hinzugefügt werden. Du kannst es lösen, indem Du den Eventlistener auf window registrierst und dann anhand der Klasse prüfst ob der Löschbutton gedrückt wurde.
Element.classList - Web APIs | MDN
Du wirst die Funktion contains brauchen.

Eine alternative Lösung besteht darin, gleich nach dem Erzeugen des Knopfes den Listener zu registrieren:
Code:
        //------------ Löschen Button zu jedem Eintrag ------------
        var loeschenKnopf = document.createElement("button");
        loeschenKnopf.addEventListener('click', event => {
            // Hier jetzt die Aktivitäten, die Du zum Löschen brauchst.
            // Unter event.target findest Du den Knopf, der gedrückt wurde.
        });
        loeschenKnopf.appendChild(document.createTextNode("Loeschen"));
 
Zuletzt bearbeitet:

Nico.Milano

Grünschnabel
Ja, das ist ein gängiges Problem wenn Elemente dynamisch hinzugefügt werden. Du kannst es lösen, indem Du den Eventlistener auf window registrierst und dann anhand der Klasse prüfst ob der Löschbutton gedrückt wurde.
Element.classList - Web APIs | MDN
Du wirst die Funktion contains brauchen.

Eine alternative Lösung besteht darin, gleich nach dem Erzeugen des Knopfes den Listener zu registrieren:
Code:
        //------------ Löschen Button zu jedem Eintrag ------------
        var loeschenKnopf = document.createElement("button");
        loeschenKnopf.addEventListener('click', event => {
            // Hier jetzt die Aktivitäten, die Du zum Löschen brauchst.
            // Unter event.target findest Du den Knopf, der gedrückt wurde.
        });
        loeschenKnopf.appendChild(document.createTextNode("Loeschen"));
Vielen Dank für deine Hilfe hat super geholfen.

An die zweite Lösung hatte ich gedacht bzw. versucht umzusetzen, hatte jedoch nicht geklappt und nun weiß nun auch was ich bei meinem Test falsch gemacht hatte.
 

Quaese

Moderator
Moderator
Hi,

nur als Ergänzung zu @Sempervivum - ich habe vor einiger Zeit ein Gist erstellt, das Routinen enthält, die einen solchen sogenannten *live*-Event abbilden. Gerade habe ich nochmal den Kommentar aktualisiert, so dass das Beispiel problemlos funktionieren sollte.

Ciao
Quaese
 
Status
Dieses Thema wurde gelöst! Zur Lösung gehen…