Can't remove event listener

Question

Can anyone tell why bt2 event listener is not getting removed in if block. As when I remove the event listener in the p function, it\'

Answer 1

removeEventListener requires that you pass it the same function, but your p functions are not the same: A new one is created every time pro is called. So the one you're trying to remove isn't the one you added, and so it isn't removed.

Removing it within p works, because within each p function, the identifier p refers to that specific p function. So if that one's been added, it will successfully remove itself.

You can prove this to yourself by putting a unique identifier on your function (see comments):

(function() {
    if (window.addEventListener) window.addEventListener('load', init, false);

    var functionId = 0; // Something to give us unique IDs

    function init() {
        var i = 0;
        var get = document.getElementById('bt1').addEventListener('click', function() {
            pro(0);
        }, false);

        function pro(x) {
            snippet.log('yeah');
            // We ALWAYS to into the body of this if, the condition
            // is just here for emphasis
            if (!p.id) {
                p.id = ++functionId;
            }
            if (!x) x = 0
            if (x != 0)
            {
                snippet.log("Removing #" + p.id); // <===
                document.getElementById('bt2').removeEventListener('click', p, false);
            }
            document.getElementById('bt2').innerHTML = 'this is a button ' + x;

            function passTo(y) {
                pro(y);
            }
            snippet.log("Adding #" + p.id); // <===
            document.getElementById('bt2').addEventListener('click', p, false);

            function p() { 
                passTo(x + 1);
            }

        }
    }
}());

bt1
bt2

If we run that and click bt1 once, then repeatedly click bt2, we see:

yeah
Adding #1
yeah
Removing #2
Adding #2
yeah
Removing #3
Adding #3
yeah
Removing #4
Adding #4

Note how each time we're trying to remove a different function than we added.

If you want to remove the previous one, you need to remember it elsewhere (see comments):

(function() {
    if (window.addEventListener) window.addEventListener('load', init, false);

    var functionID = 0;
    var lastp = null; // <===

    function init() {
        var i = 0;
        var get = document.getElementById('bt1').addEventListener('click', function() {
            pro(0);
        }, false);

        function pro(x) {
            snippet.log('yeah');
            if (!p.id) { // Again, always true
                p.id = ++functionID;
            }
            if (!x) x = 0;
            if (lastp) // <===
            {
                snippet.log("Removing #" + lastp.id);
                document.getElementById('bt2').removeEventListener('click', lastp, false);
            }
            document.getElementById('bt2').innerHTML = 'this is a button ' + x;

            function passTo(y) {
                pro(y);
            }
            lastp = p; // <===
            snippet.log("Adding #" + p.id);
            document.getElementById('bt2').addEventListener('click', p, false);

            function p() { 
                passTo(x + 1);
            }

        }
    }
}());

bt1
bt2