Remove EventListener in JavaScript after event occurred?

Question

There are 24 div-objects waiting/listening for a mouse-click. After click on one div-object, I want to remove the EventListener from all 24 div-objects.

for (var i=1;i<=24;i++){
    document.getElementById('div'+i).addEventListener('click',function(event){
        for (var z=1;z<=24;z++){
            document.getElementById('div'+z).removeEventListener()//Problem lies here
        }

        //Some other code to be run after mouseclick

        },false);

}

The problem is that the removeEventListener is nested in addEventListener and I need to define type, listener, caption as attributes to the removeEventListener method. And I think it is impossible to define the listener because of nesting.

I also tried to define a function name, but it didn't worked:

for (var i=1;i<=24;i++){
    document.getElementById('div'+i).addEventListener('click',function helpme(event){
        for (var z=1;z<=24;z++){
            document.getElementById('div'+z).removeEventListener('click',helpme,false);
        }

        //Some other code to be run after mouseclick

        },false);

}

Answer 1

You can tell the event listener to simply fire just once:

document.addEventListener("click", (e) => {
            // function which to run on event
}, { once: true });

The documentation says:

once:
A boolean value indicating that the listener should be invoked at most once after being added. If true, the listener would be automatically removed when invoked.

Answer 2

For those who needs to remove after a certain condition (or even inside a loop too), one alternative is using AbortController and AbortSignal:

const abortController = new AbortController();

let handler = function(event) {
    if(...) {
        abortController.abort();
    }
};

addEventListener('click', handler, {signal: abortController.signal});

Answer 3

The same answer:

element.addEventListener("click", (e) => {
  // function which to run on event 
}, { once: true });

You can read more here: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener