Why does my removeEventListener not work?

Question

I am working on building a simple script where a user click's either a blue button or a red button. When the blue button's are clicked the one the user clicks on should fade out, which works fine. However if the user clicks the red button then the fade out on the blue will stop. Like I said the blue buttons work but the red one doesn't.

Looking at various questions and answers on here and other sites I believe that the code I have is correct and it seems that the reason it won't work is because they don't match, ie I am not actually removing the add event.

The code I have is below and any help would be appreciated, I am using Adobe Animate to code in:

instance = this;
instance.stop();

//Buttons array
var lowerQuestions = [instance.BTN1, instance.BTN2, instance.BTN4];

//Add an event listener to each button in the array
addEventListeners();
function addEventListeners(){
    lowerQuestions.forEach(function(element) {
        element.addEventListener("click", function(){
            console.log('add listener');
            addButtonValue(element);
        },false);
    });
}

//Remove event listeners when BTN3 is clicked
instance.BTN3.addEventListener("click", removeEventListeners)

function removeEventListeners(){
    console.log('prevent');

    lowerQuestions.forEach(function(element) {
        element.removeEventListener("click", function(){
            console.log('remove listener');
                addButtonValue(element);
            //console.log('hit me here');
            },false);
    });

}

//Event listener function
function addButtonValue(element){
instance.addEventListener("tick", fadeOut);
element.alpha = 1;
    function fadeOut(){
        element.alpha -= 0.15;
        if(element.alpha <= 0){
            instance.removeEventListener("tick", fadeOut);}
        }
}

Answer 1

For remove event listener of the element you have two choice. 1- make a copy of element and replace with this one. 2- put name for listener function and pass it to remove event listener. In your code i suggest first solution. This code can help you, for every single element that you want remove listener should run this code :

function removeEventListeners(){
    console.log('prevent');

    lowerQuestions.forEach(function(element) {
        var cln = element.cloneNode(true);
        element.parentNode.appendChild(cln);
        element.parentNode.removeChild(element);
    });
}

Answer 2

Are anonymous functions able to handle removeEventListener? discusses why anonymous function expressions are not great for event listeners that need to be removed - function expressions produce a different function object each time they are executed, so the remove function never matches the added function.

A simple solution in this case is to create the listener using a standard named function declaration:

function buttonClicked(){
    addButtonValue( this);
}
addEventListeners();
function addEventListeners(){
    lowerQuestions.forEach(function(element) {
        element.addEventListener("click", buttonClicked, false);
    });
}

which make the listeners removable by name:

//...

lowerQuestions.forEach(function(element) {
    element.removeEventListener("click", buttonClicked, false);
});

//...