单击时在 html 中使用 javascript 删除内容
我之前曾发布过有关此页面的信息，我正在尝试创建，但仍然遇到错误。我对此很陌生并且感到困惑。我需要使用 for 循环来遍历图像并为每个图像分配一个事件侦听器，以便在单击它们时将它们删除。我对差异变量感到困惑并将html拉入我的javascript。我不断收到“.addEventListener 不是一个函数”，所以我不断改变事情但迷路了。
<!DOCTYPE html>
<html>
<body>
<div id = 'img'>
<img src="https://www.sciencemag.org/sites/default/files/styles/article_main_large/public/dogs_16x9_0.jpg?itok=byPuhQjh" id="img"/>
<img src="https://www.yvr.ca/-/media/yvr/blog/2018/57_yvr_puppies_2018.jpg" id="img"/>
</div>
<script text="javascript">
let images = document.querySelectorAll("img");
for (let i = 0; i < images.length; i++){
images[i].addEventListener("click", () => {
images[i].remove();
});
}
</script>
</body>
</html>
红糖糍粑浏览 182回答 6
6回答
-
慕妹3146593
您正在直接访问数组，它不会有 addEventListener。试试 images[i].addEventListener -
饮歌长啸
images.addEventListener应该是images[i].addEventListener。您希望将侦听器添加到数组中的特定图像，而不是数组本身。类似的问题images.remove()。 -
有只小跳蛙
首先，您的容器和两个图像都有相同的 id - ID 应该是唯一的。其次，正如人们已经提到的，您不能将 eventListener 附加到对象数组。像这样的事情应该做：let images = document.querySelectorAll("[id^='img']"); for (let i = 0; i < images.length; i++){ images.forEach(i=>{i.addEventListener("click", () => { i.remove(); }); }); } <div id = 'box'> <img src="https://www.sciencemag.org/sites/default/files/styles/article_main_large/public/dogs_16x9_0.jpg?itok=byPuhQjh" id="img1"/> <img src="https://www.yvr.ca/-/media/yvr/blog/2018/57_yvr_puppies_2018.jpg" id="img2"/></div> -
森栏
这将对您有所帮助 - https://jsfiddle.net/n5mk9Lzj/let images = document.querySelectorAll("img");for (let i = 0; i < images.length; i++) { images[i].addEventListener("click", function() { images[i].remove(); });} -
ABOUTYOU
您不能将事件处理程序附加到图像列表所以循环图像并为它们中的每一个// for each image in images image.onclick = function (e) { e.target.parentNode.removeChild(e.target); -
BIG阳
您需要更新代码，您没有在循环内使用索引。您不能将任何侦听器直接添加到图像数组。<!DOCTYPE html><html> <body> <div id = 'img'> <img src="https://www.sciencemag.org/sites/default/files/styles/article_main_large/public/dogs_16x9_0.jpg?itok=byPuhQjh" id="img"/> <img src="https://www.yvr.ca/-/media/yvr/blog/2018/57_yvr_puppies_2018.jpg" id="img"/></div> <script text="javascript"> let images = document.querySelectorAll("img"); for (let i = 0; i < images.length; i++){ images[i].addEventListener("click", () => { images[i].remove(); }); } </script> </body></html>
随时随地看视频慕课网APP
相关分类
JavaScript