Question

我制作了这个 favImages 数组并向其中添加了一些图像对象。然后我尝试向每个元素附加一个段落元素（removeButton），这将通过单击图像触发。

var favImages = new Object();
for (var i = 0; i < 5; i++) {
  favImages[i] = document.getElementById("fav" + (i + 1));
}

var removeButton = document.createElement("p");
removeButton.id = "removebutton";
removeButton.innerHTML = "Remove Image";

for (var i = 0; i < 5; i++) {
  var newImage = document.getElementById(favImages[i].id);
  newImage.addEventListener("click", function() {
    newImage.appendChild(removeButton)
  }, false);
}

Answer 1

不要使用循环。在容器上使用事件侦听器并使用 event.target 测试单击的内容。您不能在图像中添加子项

您可以使用 div，将图像作为背景，将要单击的跨度作为内容

无论如何这里有一些例子

document.getElementById("container").addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("remove")) tgt.closest("div").remove()
})

#container div {
  width: 200px
}

.remove {
  float: right
}

<div id="container">
  <div>
    <span class="remove">X</span>
    <img src="https://via.placeholder.com/150/0000FF/000888?text=image1" />

  </div>
  <div>
    <span class="remove">X</span>
    <img src="https://via.placeholder.com/150/FF00FF/000888?text=image2" />

  </div>
  <div>
    <span class="remove">X</span>
    <img src="https://via.placeholder.com/150/FF0000/000888?text=image3" />

  </div>
</div>

来自数组：

const images = [
  "https://via.placeholder.com/150/0000FF/000888?text=image1",
  "https://via.placeholder.com/150/FF00FF/000888?text=image2",
  "https://via.placeholder.com/150/FF0000/000888?text=image3"
];

const container = document.getElementById("container");
container.innerHTML = images.map(img => `<div><span class="remove">X</span>
    <img src="${img}" /></div>`).join("");


container.addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("remove")) tgt.closest("div").remove()
})

#container div {
  width: 200px
}

.remove {
  float: right
}

<div id="container">

</div>

无法将段落附加到图像元素

1 个答案: