如何使用javascript中的鼠标悬停事件删除我在javascript中创建的DOM节点？

Question

So the HTML displays an area with a hundred little boxes places in it at random positions. I've used javascript to make the little boxes. There's also a button in the HTML that I've programmed in js to make a hundred more little boxes every time it's clicked. My issue is that I want to be able to make each little box disappear every time I hover over it, preferably using the "this" command to do so. Am I doing anything wrong, or is javascript unable to interact with new HTML elements after it creates them?

Here's my code:

 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

"Try using event.target instead of This in the destroyBoxes() function."

That being said...Great job on discovering a solution on your own!

If interested, here's my solution using jQuery functions.

 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>