Meinungen zu meinem Widget

[Rolf B]

Hallo Felix,

wenn Du die Logik mehr beisammenhalten willst, kann man es auch so machen:

const deleteButton = document.querySelector("#deleteMarked")
new ConfirmationButton(deleteButton);
deleteButton.addEventListener("click", () => alert("Weg damit!"););
deleteButton.addEventListener("cancel", () => alert("Na, dann nicht!"));

Statt querySelector könntest Du den Button an dieser Stelle auch dynamisch erzeugen...

Vielleicht stört es Dich, dass ich das mit new erzeugte Objekt nicht speichere. Aber das ist kein Problem. Da Methoden dieses Objekts als Eventlistener ins DOM gehängt werden, existieren Referenzen auf das Objekt so lange, wie der Button im DOM ist.

Falls Du den Button auch wieder dynamisch entfernen willst, musst Du allerdings etwas vorsichtiger sein, dann musst Du auch den Prompt-Span und den Cancel-Button wieder entfernen. Dafür habe ich jetzt noch keinen Mechanismus eingebaut. Mein Ansatz wäre dann, am HTMLButtonElement des Delete-Buttons ein eigenes Property zu verstecken (mit einem Symbol als Schlüssel) und dort das ConfirmationButton-Objekt zu hinterlegen. Dieses könnte dann mit einer detach-Methode den alten Zustand wiederherstellen.

Rolf