Removing event listeners with anonymous function calls in JavaScript

Question

I'm trying to remove an event listener for created span elements where the function called is within a closure. I've tried various methods and none seem to work.

var MyClass = function () {}

MyClass.prototype.addSpan = function (el) {
    var span = document.createElement('span');
    span.innerHTML = "Text here";
    el.appendChild(span);
    span.addEventListener('click', (function (obj) { 
        return function () { 
            obj.removeSpan(); 
        }
    })(this), false);
}

MyClass.prototype.removeSpan = function () {
    alert('removing span');
    this.removeEventListener('click', arguments.callee, false);
    // .... remove span .... 
}

myclass = new MyClass();

myclass.addSpan(document.getElementById('box'));

I've also used

this.removeEventListener('click', (function (obj) { 
    return function () { 
        obj.removeSpan(); 
    }
})(this), false);

in place of this.removeEventListener('click', arguments.callee, false); but had no luck.

Any help is much appreciated!

Simplify the unnecessary closure: (function (obj) { return function () { obj.removeSpan(); })(this) -> function( obj ) { obj.removeSpan(); } — sergzach
– sergzach, Commented Mar 29, 2012 at 16:01
In your example the obj will refer to the event rather than the class. — Rich
– Rich, Commented Mar 29, 2012 at 16:10
Why are you trying to call removeSpan from removeEventLister? Your removeEventListener calls removeSpan. It's infinite recursion. — sergzach
– sergzach, Commented Mar 29, 2012 at 16:13

The Alpha · Accepted Answer · 2012-03-29 17:04:48Z

var MyClass = function () {}
MyClass.prototype.listener=null;
MyClass.prototype.addSpan = function (el) {
    var span = document.createElement('span');
    span.innerHTML = "Text here";
    el.appendChild(span);
    span.addEventListener('click', (function (obj) { 
        return obj.listener = function () { 
            obj.removeSpan(this); // here 'this' refers to 'span'
        }
    })(this), false);
}

MyClass.prototype.removeSpan = function (el) {
    alert('removing span');
    el.removeEventListener('click', this.listener, false);
    // .... remove span .... 
}

myclass = new MyClass();
myclass.addSpan(document.getElementById('box'));

Without a reference of the listener you can't remove it, so I've also added a property (listener) to the MyClass' prototype and then returned the reference as return obj.listener and also you need to pass the object as I've passed it obj.removeSpan(this); and in the removeSpan I've received with el so I could've done el.removeEventListener, hope it helps.

You can also do this

var MyClass = function () {this.listener=null;}

instead of

MyClass.prototype.listener=null;

Here is an example.

KDV · Accepted Answer · 2012-03-29 15:51:32Z

0

Try changing your event handler to this.

span.addEventListener('click', (function (obj) { 

        span.onclick = null;

        return function () { 
            obj.removeSpan(); 
        }
    })(this), false);

answered Mar 29, 2012 at 15:51

KDV

7302 gold badges6 silver badges12 bronze badges

1 Comment

Rich Over a year ago

I tried putting that in place of the original but no luck unfortunately :(

Collectives™ on Stack Overflow

Removing event listeners with anonymous function calls in JavaScript

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related