Tutorial :prototype: Element.remove.bind(foo) doesn't work as expected



Question:

I have this snippet:

self.puff({duration: 0, queue: 'end',          afterFinish: Element.remove.bindAsEventListener(self)      });  

Self is an element; it is supposed to remove an element from document when all effects on it are completed.

Unfortunately, this doesn't work, failing with "element.parentNode is undefined". If I replace Element.remove.bindAsEventListener(self) with function() { self.remove(); } then it would. I've tried just bind() with the same results.

The question is: why doesn't it work, and how should I use bind()?

Bonus points for showing an easier way to remove an element after all effects on it are done.


Solution:1

self.puff({duration: 0, queue: 'end',      afterFinish: function () { self.remove(); }  });  

What's wrong with this way of putting it? You even suggest it yourself. In any case, you don't need to bind it as an event listener, since it is only a Prototype syntatic sugar version of bind to ensure that the first parameter to the function is always the event-object. Since afterFinish is not a browser event, it is unnecessary.

Finally, you are binding the incorrect function. You should bind the method instance of self:

self.puff({duration: 0, queue: 'end',      afterFinish: self.remove.bind(self)  });  


Solution:2

Why not simply use:

function(){ self.remove(); }  

This is actually more readable.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »