Cfrgtkky

document.body.removeEventListener("click", delElm);

removes all "onclick" events for the entire page. why? Am I not clearly specifying what function I want removed from the document.body?

document.body.innerHTML += "<div id='dynamicLinkCheckOutput'></div>";

var dynamicLinkCheckOutput = document.getElementById('dynamicLinkCheckOutput');



function delElm(e){

    var dynamicLinkCheckOutput = document.getElementById('dynamicLinkCheckOutput');        

       dynamicLinkCheckOutput.parentNode.removeChild(dynamicLinkCheckOutput);

    //document.body.removeEventListener("click", delElm); //moved for clairity

}

setTimeout(function(){

    dynamicLinkCheckOutput.onclick = function(e){

        e.stopPropagation();

    };

    document.body.addEventListener("click", delElm);

    document.body.removeEventListener("click", delElm); //ALL click events from ALL elements have been removed the moment this line executes. 

}, 0);

document.body.removeEventListener("click", delElm);

removes all "onclick" events for the entire page

No, it doesn't. But this does:

document.body.innerHTML += "<div id='dynamicLinkCheckOutput'></div>";

Using += on innerHTML forces the browser to:

• Spin through all of the elements inside body building an HTML string for them.


• Return that string to the JavaScript layer, which then adds on the string on the right-hand side.


• Parse the string assigned back to innerHTML by the JavaScript layer, wipe out all elements within body (thus losing their event handlers and most other state), and create new, replacement elements for them from the parsed HTML.

If you want to append to body (or any other element), don't use innerHTML += x, use:

• 
  

  insertAdjacentHTML:

  
  
  

  document.body.insertAdjacentHTML("beforeend", "<div id='dynamicLinkCheckOutput'></div>");
  
  

  
  
  

  or

  
  


• 
  

  createElement and appendChild:

  
  
  

  var div = document.createElement("div");
  
  div.id = "dynamicLinkCheckOutput";
  
  document.body.appendChild(div);
  
  

  
  
  

  or

  
  



• Various other DOM methods. More to explore: DOM on MDN.