- This script hides the parent block
- if it doesn't have the src of the image loaded.
- Works in all browsers except Firefox
Is this a Firefox bug or a script issue? If the problem is in the script, how can I make it work in Firefox?
P.S. This error is not visible on this site. Try creating an index.html file locally(without using the internet) on your PC and paste this code there, then view the result in Firefox.
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>