Trotz Ausführung des JS-Codes bleiben die HTML-Elemente unberührt

Hey,

Ich habe ein HTML-Element, welches ich durch ein Klick-Event immer wieder neu erzeuge. In diesem ist für jedes Element auch ein Löschen Button. Dieses kann ich mit einem Klick auswählen. Dabei wird dann ein kleines Menü angezeigt, welches die einzelnen Daten des jeweiligen HTML-Elements anzeigt.

Wenn ich nun während dieser Ansicht auf den Löschen Button, des jeweiligen HTML-Elements, klicke wird es zwar entfernt aber der JS-Code, welches das Menü wieder ausblenden und das Elemente-Menü anzeigen soll, zeigt einfach keine Auswirkung. Ich verstehe nicht warum.

Ich habe schon viel gedebuggt und geschaut woran es liegen kann. Die entsprechende Funktion wird auch ausgeführt. Nur der Code in dieser Funktion unerklärlicherweise nicht.

Hier ist der Code:

// Funktion, welche bei Klick auf den Löschen-Button das Menü ausblenden und die verfügbaren Elemente einblenden soll
function hideMenu(){  
    $("#menu").css("display", "none");
    $("#aviableElements").css("display", "block");   
}

// Diese Funktion wird ausgeführt, wenn ich auf den Löschen-Button klicke. In dieser wird dann die oben stehende Funktion hideMenu() ausgeführt.
function deleteElement(e, hideMenu){
      let element= $(e)[0].currentTarget;
      $(element).remove();

        
      hideMenu();
}

$("#" + elementId).on("click", function(e){
    $("#"+ elementId).find(".delete").on("click", function(e){
         Elements.deleteElement(e, Menu.hideMenu); // Hier wird der Funktion deleteElement die Funktion hideMenu aus dem Modul Menu mitgegeben
    });
}

Hat jemand eine Idee woran dies liegen kann?

Ich freue mich von euch zu hören.

Schöne Grüße,
Stef

Guten Morgen,

vielen Dank für eure Antworten. Ich habe diese Woche mehrere Methoden ausgetestet und auch die Ursache für dieses Verhalten gefunden.

jonas3344 : Ich habe den EventListener nach deinem Vorschlag ausgetestet. Dort kam es jedoch dazu, dass egal wo ich im DOM klickte alle Elemente nach und nach entfernt worden sind.

& wie würdest du das mit den EventListener regeln? Hast du da eine andere Vorgehensweise? Würde mich freuen, wenn du diese mit mir teilen kannst.

Nun zur eigentlichen Ursache warum es nicht funktioniert hat: Wenn ich auf den Delete-Button klicke, wird das ganze HTML-Element selektiert, in dem dieser Button liegt. Nun habe ich über e falsche Werte erfasst, was dazu geführt hat, dass nach Ausführung der Hide-Funktion nochmal die show-Funktion ausgeführt wurde.

Die Lösung war, ganz genau zu prüfen, ob der Delete Button geklickt worden ist. Falls ja wird einfach das Element gelöscht und die Hide-Funktion ausgeführt.

Schöne Grüße,
Stef