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

Posted 2023-02-19

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

【英文标题】：How do I remove DOM nodes that I created in javascript using mouseover events in javascript?

【发布时间】：2019-04-07 07:00:00

【问题描述】：

因此，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;
    
    

【问题讨论】：

嘿@BuddyCodes，我得去尝试event.target，而不是destroyBoxes() 函数中的This。祝你好运，上帝保佑！

@ChrisHappy 非常感谢！在修改了你的建议之后，我能够让它完美地工作。我希望你现在和我一样好，哈哈

【参考方案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>

【讨论】：

~即时满足：点击按钮直到填满屏幕。慢慢删除它们...