單擊時刪除圖像
[英]Delete Image when clicked
問題描述
我試圖寫一個有圖像的頁面，當它們被點擊時，它們會消失。 我不斷收到“.addEventListener 不是函數”。 我在做什么錯/錯過了什么？
<!DOCTYPE html>
<html>
<body>
<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" />
<script text = "javascript">
let image_node = document.createElement('img');
img.addEventListener('click', () => {
img.parentNode.removeChild(img);
});
</script>
</body>
</html>
4 個解決方案
解決方案1
0 2020-06-16 00:02:28
盡管我不確定您將要做什么，但我認為您可以通過添加事件偵聽器來做您想做的事情。 這是一個例子：
const image = document.querySelector("img");
const imgView = true;
function handleImgClick() {
if (imgView == true) {
image.style.display = "none";
imgView = false;
} else {
image.style.display = "inline-block";
imgView = true;
}
}
image.addEventListener("click",handleImgClick);
解決方案2
0 已采納 2020-06-16 00:06:17
每個標簽的 Id 屬性必須是唯一的（在您的情況下，每個img標簽）。
使用唯一 ID 命名每個標簽后，您可以使用 javascript 和document.getElementById(id)來獲取它們。 然后你可以使用remove()來排除這些標簽。
我對你的代碼做了一些修改。 看看它是否工作。
<!DOCTYPE html>
<html>
<body>
<img
src="https://www.sciencemag.org/sites/default/files/styles/article_main_large/public/dogs_16x9_0.jpg?itok=byPuhQjh"
id="first-img"
/>
<img
src="https://www.yvr.ca/-/media/yvr/blog/2018/57_yvr_puppies_2018.jpg"
id="second-img"
/>
<script text="javascript">
let firstImage = document.getElementById("first-img");
let secondImage = document.getElementById("second-img");
firstImage.addEventListener("click", () => {
firstImage.remove();
});
secondImage.addEventListener("click", () => {
secondImage.remove();
});
</script>
</body>
</html>
解決方案3
0 2020-06-16 00:12:23
您可以收聽正文中的所有點擊並刪除目標它是一個 IMG 標記。
document.addEventListener('click', function(e) { if (e.target.tagName === 'IMG') { e.target.remove(); } });
img { height: 60px; }
<img src="https://picsum.photos/200/300"> <img src="https://picsum.photos/200/300"> <img src="https://picsum.photos/200/300"> <img src="https://picsum.photos/200/300"> <img src="https://picsum.photos/200/300"> <img src="https://picsum.photos/200/300"> <img src="https://picsum.photos/200/300"> <img src="https://picsum.photos/200/300"> <img src="https://picsum.photos/200/300"> <img src="https://picsum.photos/200/300">
解決方案4
0 2020-06-16 02:19:35
const images = document.querySelectorAll("#images img"); images.forEach(img => { img.addEventListener("click", function () { this.remove(); }); });
#images img { width: 323.6px; height: 200px; margin: 0 10px 10px 0; object-fit: cover; object-position: center; cursor: pointer; }
<div id="images"> <img src="https://picsum.photos/200/300?1"> <img src="https://picsum.photos/200/300?2"> <img src="https://picsum.photos/200/300?3"> <img src="https://picsum.photos/200/300?4"> <img src="https://picsum.photos/200/300?5"> </div>
單擊時刪除文本-JavaScript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.