I'm calling an API that contains images. My goal's to delete any image I want onclick but it doesn't seem to be working. In my `non-working` below, I get an error that says: `Uncaught TypeError: Cannot set property 'display' of undefinedat HTMLImageElement.<anonymous> (index.js:39)` 

However, in my `working-code`, I can successfully delete the first image only onclick (obviously because of the `[0]`. 

How would I be able to iterate through the list of images and onclick, delete the image? 

Here's my `non-working` code:

```
var img = document.querySelectorAll(".the-img");

for(var i = 0; i < img.length; i++) {
    img[i].addEventListener("click", function () {
    img.style.display = "none";
    })
}

```

Here's my `working-code`:

```
var img = document.getElementsByClassName("the-img")[0];

img.addEventListener("click", function () {
    img.style.display = "none";
})

```