时间戳

首页 > 解决方案 > 使用鼠标悬停删除生成的输入区域

javascript - 使用鼠标悬停删除生成的输入区域

问题描述

这是我的代码：

setInterval(function(){
  
  let fklas = document.createElement("input"); 
  fklas.setAttribute('type', 'text');
  
  let randomX = 10
  let randomY = 10
  
  fklas.style.top= randomX + "%"
  fklas.style.left= randomY + "%"
  document.body.append(fklas);
 },100)
  
  
function mouseOver() {
	console.log(this.id);
    this.parentNode.removeChild(this);
}
var list = document.getElementsByTagName("input");
for (var i = 0; i < list.length; ++i) {
    list[i].addEventListener("mouseover", mouseOver);
}

我想用鼠标悬停删除输入区域。应该像游戏一样。我的删除功能不起作用。有人可以解决这个问题吗？

爱。

标签： javascriptinput

解决方案

您需要将其附加到每个生成的元素。

setInterval(function() {
  let fklas = document.createElement("input");
  fklas.setAttribute('type', 'text');

  let randomX = 10
  let randomY = 10

  fklas.style.top = randomX + "%"
  fklas.style.left = randomY + "%"
  fklas.addEventListener("mouseover", mouseOver) // <-----
  document.body.append(fklas);
}, 100)


function mouseOver() {
  console.log(this.id);
  this.parentNode.removeChild(this);
}

// <-- there are no element generated at this point so your for loop is effectively no-op

*我省略了样式部分，因为它是不同的问题。

推荐阅读