javascript - Mouseleave event still shows "cannot read property 'remove' of null"?

Question

Why is my nodeRemove variable returning 'Cannot read property 'remove' of null'? And how to solve this? I already tried to set up an if statement but still, when the mouseleave event occurs it suddenly gives an error. It seems it only occurs when the mouse is moved slowly from the created 'div' element though.

Thanks in advance!

//Code...

setInterval( function() {

(function() {
    
    console.log("this works 1");
    
    var elts = document.getElementsByClassName('class');
      
    for (var i = 0; i < elts.length; i++) {
      
        elts[i].addEventListener("mouseover", function(event) {
        var element = event.target;
        console.log("this works 2");
            
    var name = element.innerText;
            
  switch(name) {
    case "TEXT":

        var node = document.createElement("div");
        node.setAttribute("id", "Div1");
        node.style.cssText = 'position:absolute;left:750px;width:300px;height:200px;-moz-border-radius:100px;border:3px  solid #ddd;-moz-box-shadow: 0px 0px 8px  #fff; background-color: #fff; color:#000; font-size:12px;padding:10px;display:block; !important;';
        var textnode = document.createTextNode("Explain text for this event. Explain text for this event. Explain text for this event."); 
        node.appendChild(textnode);                             
        element.appendChild(node);     
    
    console.log("this works 3"); 

    break;
      case "OTHERTEXT":

        var node = document.createElement("div");
        node.setAttribute("id", "Div1");
        node.style.cssText = 'position:absolute; top:0; right:0; float:right;width:300px;height:200px;-moz-border-radius:100px;border:3px  solid #ddd;-moz-box-shadow: 0px 0px 8px  #fff; background-color: #fff; color:#000; font-size:12px;padding:10px;display: inline-block; !important;';
        var textnode = document.createTextNode("Explain text2 for this event. Explain text2 for this event. Explain text2 for this event.");       
        node.appendChild(textnode);                            
        element.appendChild(node);     
    
    console.log("this works 4");     
          
    break;

    default:
    element.innerText += "";     
    break;
    
        
          }
    
    });
        
    elts[i].addEventListener("mouseleave", function(event) {

        var element = event.target;
        console.log("this works 5");
            
    var nodeRemove = document.getElementById('Div1'); 
      if (nodeRemove) {
    nodeRemove.remove();
            }

    console.log("this works 6");    
    
        });
      
    }
        
})()

}, 10000);

Answer 1

等待大神答复