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