问题描述
谁能向我解释为什么我会收到这个错误？ “未捕获的类型错误：无法读取未定义的属性‘addEventListener’”。 我正在尝试为每个图像添加一个删除按钮。
<!DOCTYPE html>
<html>
<head lang="en-us">
<title>temp.html</title>
<Meta charset="utf-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<Meta http-equv="X-UA-Compatible" content="IE=Edge">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="image">
<img src="https://via.placeholder.com/150" alt="First">
<button class="remove">X</button>
</div>
<div class="image">
<img src="https://via.placeholder.com/150" alt="Second">
<button class="remove">X</button>
</div>
<script>
var appButtons = document.querySelectorAll(".remove");
for(var i=0; appButtons.length; i++){
appButtons[i].addEventListener("click",function(){
var father = appButtons[i].parentElement;
var grandfather = appButtons[i].parentElement.parentElement;
grandfather.removeChild(father);
});
}
</script>
</body>
</html>
解决方法
不确定这部分是否重要：
for(var i=0; appButtons.length; i++){
应该
for(var i=0; i < appButtons.length; i++){
下面的 forEach 示例有效。它也不会在每个按钮上导致回发，但 for 循环方式会。 （为什么？）
FWIW：for 循环（上面）中的每个元素只是一个 object，但 forEach 循环（下面）中的每个元素都是一个 [object HTMLButtonElement]。
使用forEach。 Source。
var appButtons = document.querySelectorAll(".remove");
appButtons.forEach(function(item) {
item.addEventListener("click",function() {
var father = item.parentElement;
var grandfather = item.parentElement.parentElement;
grandfather.removeChild(father);
});
});