Почему указанное изображение не удаляется по щелчку при попытке перебрать список изображений?

Question

Я звоню API, который содержит изображения. Моя цель - удалить любое изображение, которое я хочу, по клику, но оно не работает. В моем non-working ниже я получаю сообщение об ошибке: Uncaught TypeError: Cannot set property 'display' of undefinedat HTMLImageElement.<anonymous> (index.js:39)

Однако в моем working-code я могу успешно удалить первое изображение только по клику (очевидно, из-за [0].

Как бы я мог перебирать список изображений и нажимать на них, удалять изображения?

Вот мой non-working код:

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

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

Вот мой working-code:

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

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

Answer 1

Внутри вашего обработчика событий в нерабочем коде вы должны использовать this.style.display = "none", чтобы this ссылался на объект, по которому щелкнули.

В противном случае, особенно путем индексации img array won ' т работа.

Answer 2

document.querySelectorAll('.the-img').forEach(function(elem){
 elem.addEventListener('click', function(event){
  this.style.display = 'none';
 });
});