javascript - Multiple firings of event listener even after element has been removed? -

i'm using bit of code remove element dom once css transition has completed.

elem.addeventlistener('transitionend',function(e) {     this.parentnode.removechild(this); }, false); 

but since transition affects 2 properties opacity 1 -> 0, height 20px -> 0, event fires twice, , errors on second firing (since element has been removed dom @ point).

i tried testing property (as seen here: https://stackoverflow.com/a/18689069/1058739), test fails instead.

surely when element removed dom event listeners attached should removed?

what's trick i'm missing here?

thanks

why detaching element dom remove event handlers? element still exists, not in dom. imagine trying move element 1 parent another

element.parentelement.removechild(element) newparent.appendchild(element) 

do think detaching event handlers idea?

that being said, can solve issue in 2 ways.

check if element has parent

elem.addeventlistener('transitionend', function(e) {     if (this.parentnode) {         this.parentnode.removechild(this);     } }, false); 

or

detach event listener

var ontransitionended = function (e) {     this.parentnode.removechild(this);     this.removeeventlistener('transitionend', ontransitionended); } elem.addeventlistener('transitionend', ontransitionended)