Исчезновение блока, если в нём нет изображения

Question

Всем здоровья и счастья! Написал скрипт, который должен перебирать все изображения, если изображения не загрузились, то скрипт должен скрывать родительской блок под классом .Parent_block, то есть у меня 3 блока, в центральном блоке есть картинка, а в двух других нет, а значит они должны стать display none.

Но я что-то сделал не так. Где я допустил ошибку?

let parent_block = document.querySelectorAll('.Parent_block');
let image_b = document.querySelectorAll('.Child_Img');

image_b.forEach(function() {
  if(image_b.onerror) {
    for(let parent_block of hide) {
      hide.style.display = 'none';
    }
  }
})

.Parent_block {
  width: 30%;
  margin: 0;
  padding: 0;
  margin-left: 10px;
  margin-top: 10px;
  border: 1px solid black;
  display: inline-block;
  height: 250px;
}

img {
  height: inherit;
  width: 100%;
}

<figure class="Parent_block">
  <img class="Child_Img" src="">
  <figcaption class="Img_text">1</figcaption>
</figure>

<figure class="Parent_block">
  <img class="Child_Img" src="https://i.ibb.co/kyXhZmB/photo-2021-11-18-14-40-18.jpg">
  <figcaption class="Img_text">2</figcaption>
</figure>

<figure class="Parent_block">
  <img class="Child_Img" src="">
  <figcaption class="Img_text">3</figcaption>
</figure>

Answer 1

Но я что-то сделал не так. Где я допустил ошибку?

Разберём ваш код

let parent_block = document.querySelectorAll('.Parent_block');
let image_b = document.querySelectorAll('.Child_Img');

// Проходим по всем картинкам отдельно
image_b.forEach(function() {
  // ! вернёт null, основная ошибка, пользоваться .onerror нужно не так.
  if(image_b.onerror) {
    // Проходим по всем hide??? Откуда он тут?
    for(let parent_block of hide) {
      // Впрочем даже если откуда-то, откуда мы знаем, что hide === `.Parent_block`?
      hide.style.display = 'none';
    }
  }
})

Берём все изображения .Child_Img в блоке .Parent_block и проходим по ним циклом.
В цикле передаём функцию .onerror, при срабатывание которой, находим и скрываем родительский блок.

let images = document.querySelectorAll('.Parent_block > .Child_Img');

images.forEach(function(e) {
  e.onerror = function() {
    e.closest('.Parent_block').style.display = 'none';
  };
});

.Parent_block {
  width: 30%;
  margin: 0;
  padding: 0;
  margin-left: 10px;
  margin-top: 10px;
  border: 1px solid black;
  display: inline-block;
  height: 250px;
}

img {
  height: inherit;
  width: 100%;
}

<figure class="Parent_block">
  <img class="Child_Img" src="">
  <figcaption class="Img_text">1</figcaption>
</figure>


<figure class="Parent_block">
  <img class="Child_Img" src="https://i.ibb.co/kyXhZmB/photo-2021-11-18-14-40-18.jpg">
  <figcaption class="Img_text">2</figcaption>
</figure>


<figure class="Parent_block">
  <img class="Child_Img" src="">
  <figcaption class="Img_text">3</figcaption>
</figure>

БЛОГ НА HUSL

Исчезновение блока, если в нём нет изображения

Ответы (1 шт):