Eventhandler nach Klick löschen

[Orlok]

ich habe seinerzeit mal eine Funktion (damals noch in nativem JS) erstellt, die ich über

onClick='addiere(Position,Betrag)' 

Nun würde ich gerne umsetzen, dass jede zeile nach dem anklicken nicht noch einmal angeklickt werden kann und stehe etwas auf dem Schlauch.

Da du in deinem Beispiel einen String zuweist, gehe ich davon aus, dass du deinen Eventhandler im Markup als Attribut registriert hast. Ganz schlechte Praxis.

Lösche das Attribut und registriere den Handler statt dessen in einem Script. Das Mittel der Wahl für diesen Zweck ist die Methode addEventListener.

Du möchtest allerdings nicht für jedes deiner Elemente, bei denen es sich hoffentlich um Buttons handelt, einen eigenen Eventhandler registrieren, sondern du möchtest Event Delegation nutzen.

Das heißt, du referenzierst in deinem Script zunächst ein gemeinsames Elternelement aller Buttons, für die eine Ereignisbehandlung eingerichtet werden soll.

Das kannst du mit getElementById oder auch mit der Methode querySelector bewerkstelligen.

Wenn du das Element hast, rufst du dann die Methode addEventListener auf und übergibst dabei den Namen des Ereignisses als String, hier also click, und deine Handlerfunktion.

document.getElementById('parent').addEventListener('click', function (event) {
  const element = event.target;

  if (element.tagName === 'BUTTON') {
    // do something

    element.hidden = true;
  }

});

Die als zweites Argument an die Methode addEventListener übergebene Funktion wird beim Eintritt des Ereignisses automatisch mit einem Eventobjekt aufgerufen, mit dem in dem Beispiel oben der Parameter mit dem Namen event initialisiert wird.

Dieses Objekt enthält in der Eigenschaft target eine Referenz auf das Elementobjekt, bei dem das Ereignis eingetreten ist, in diesem Fall also das Element auf das geklickt wurde.

Dann wird geprüft, ob es sich bei diesem Element um einen Button handelt, indem wir den Wert der Eigenschaft tagName mit dem String BUTTON vergleichen. Handelt es sich um einen Button, dann führst du deinen Code aus und setzt anschließend das Attribut hidden des Buttons auf true.

Das Attribut hidden wird für solche Elemente gesetzt, die noch nicht, nicht, oder nicht mehr inhaltlich relevant sind, was in der letzten Variante auf den geklickten Button zutreffen dürfte.

Danach wird der Button nicht mehr angezeigt.