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);
}

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

爱。

最佳答案

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

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

*我省略了样式部分，因为这是另外一个问题。