如何使用 javascript 中的 mouseover 事件删除我在 javascript 中创建的 DOM 节点？

Question

因此，HTML 显示了一个区域，其中随机放置了一百个小框。我使用 javascript 来制作小盒子。 HTML 中还有一个按钮，我在 js 中编写了一个按钮，每次单击它时都会多生成一百个小框。我的问题是，我希望每次将鼠标悬停在每个小盒子上时都能消失，最好使用“this”命令来做到这一点。是我做错了什么，还是 javascript 在创建新的 HTML 元素后无法与它们交互？

这是我的代码：

 window.onload = function(){
 createBoxes();
 $("myButton").observe("click", createBoxes);
 var divvy = $("container");
 var pars = divvy.getElementsByTagName("p")
 pars.onmouseover = destroyBoxes;

}
function destroyBoxes (event){
var divvy = $("container");
var pars = divvy.getElementsByTagName("p")
if (event.type == "mouseover")   {
pars.removeChild(This);
}

}



function createBoxes()
{
var colors = ["red", "green", "grey", "blue", "orange", "yellow"];
for (i=0;i<=99;i++){
var newP = document.createElement("p");
var top = Math.floor( Math.random() *400 ) + "px";
var left = Math.floor( Math.random() *400 ) + "px";
newP.style.top  = top;
newP.style.left  = left;
newP.style.backgroundColor = colors[ Math.floor( Math.random() *6 )];
$("container").appendChild(newP);
      var divvy = $("container");
      var pars = divvy.getElementsByTagName("p")
      pars.onmouseover = destroyBoxes;
    }
    }

Answer 1

“尝试在destroyBoxes() 函数中使用event.target 而不是This。”

话虽这么说...自己找到解决方案的工作做得很好！

如果有兴趣，这是我使用 jQuery 函数的解决方案。

window.onload = function() {
  createBoxes();
  $(".myButton").on("click", createBoxes); // Use class selector
  //Find all `p`s in `container`
  //$pars.on('hover', destroyBox);

}

function destroyBox(event) {

  var $target = $(event.target);
  // The 'if' statement is redundant. Only run the function if wanted.
  //if (event.type == "mouseover") { 
    $target.remove();
  //}

}

function createBoxes() {
  var colors = ["red", "green", "grey", "blue", "orange", "yellow"];
  
  var newPs = [];
  
  for (i = 0; i < 100; i++) {
    var top = Math.floor(Math.random() * 400),
        left = Math.floor(Math.random() * 400),
        color = colors[Math.floor(Math.random() * 6)];
        
    var $newP = $('<p></p>').css({top: top, left: left, backgroundColor: color});
    newPs.push($newP);
    
  }
  
  var $container = $(".container").append(newPs); // Use class selector
  $container.find('p').on('mouseover', destroyBox);
}

.container {
  position: relative;
}

p {
  position: absolute;
  width: 10px;
  height: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div>
<button type="button" class="myButton">Click for more!</button>
</div>

<div class="container"></div>