Can Anybody please explain to me why I am getting this Error? "Uncaught TypeError

  html, javascript

Can Anybody please explain to me why I am getting this Error?
"Uncaught TypeError: Cannot read property ‘addEventListener’ of undefined".
I am trying to add a remove button for each image.

<!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>

Source: Ask Javascript Questions

LEAVE A COMMENT