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.

Answer 1

Why not simply use:

function(){ self.remove(); }

This is actually more readable.

Answer 2

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)
});