javascript - Mouse over not working -

i have div waiting move on event. places div information it.

the problem have getting remove event listener & remove div created... reason cannot find child div made.

so script tried:

div.addeventlistener('mouseover',bubble_info,false);   function bubble_info(e){     var x = e.pagex + 50; //push 50px right     var div = document.createelement('div');         div.style.position = 'absolute';         div.style.top = e.pagey;         div.style.left = x;         div.classname = 'bubble';         div.innerhtml = 'testing div';              this.appendchild(div);  //stop firing if mouse moves around on parent still "over" parent     this.removeeventlistener('mouseover',bubble_info,false);   //when mouse out occurs below should fire     this.addeventlistener('mouseout',function(){clear_hover.call(this,div);},false); }   function clear_hover(child){     //remove bubble div made     child.parentnode.removechild(child);       //remove mouse out out     this.removeeventlistener('mouseout',function(){clear_hover.call(this,div);},false);      //re-add mouseover listener encase user hovers on again     this.addeventlistener('mouseover',bubble_info,false); } 

can 1 see mistakes making here, can't work out why goes wrong mouse out.

dev tools shows cannot call method 'removechild' of null

the error suggesting child.parentnode == null. so, element doesn't have parentnode removed from.

if (child.parentnode)     child.parentnode.removechild(child); 

but, fixes symptom. actual issue event handler isn't being removed, keeps running subsequent mouseout occurrences.

though following functions similar, need same removal succeed.

this.addeventlistener('mouseout',function(){clear_hover.call(this,div);},false); 

this.removeeventlistener('mouseout',function(){clear_hover.call(this,div);},false); 

so, you'll need save reference function remove it:

function bubble_info(e){     var ...;      function on_mouseout() {         // pass reference `function`         clear_hover.call(this, div, on_mouseout);     }      // ...      this.addeventlistener('mouseout',on_mouseout,false); }  function clear_hover(child, handler){     //remove bubble div made     child.parentnode.removechild(child);       //remove mouse out out     this.removeeventlistener('mouseout',handler,false);      // ... }