How to remove event listener that does not directly call a function?


I have the following event listener that I set in my JS after a successful AJAX request:

var pageButtonsParentElement = document.getElementById("page-buttons");
    event => {
        let selectedPageButton =;
        if (selectedPageButton.classList.contains("page-item")){
            let selectedPageNumber = selectedPageButton.getAttribute("data-page-number");
            inputObject = createInputObject(selectedPageNumber);
            // new CallClass(inputObject); 

According to the Mozilla docs, I can call the removeEventListener() method and pass in the element as well as the function to be removed ( I’m not sure how to do this when my function is "event => …"


You need a reference to the function you want to remove.

If you don’t keep a reference to it, you can’t remove it.

Keep a reference to it.

const listener = event => { ... };
foo.addEventListener("click", listener);
foo.removeEventListener("click", listener);

Answered By – Quentin

Answer Checked By – Pedro (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.