hide or delete image not found with javascript or jquery

Question

can I hide, jump or delete images not found in balise

<a href="...">

and

<img src="...">

I already use :

$("img").error(function(){ $(this).hide(); });

images not found are hidden but when i'm in my gallery i can see a white screen.

HERE IS MY GALLERY EXAMPLE

<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/6.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/06.jpg" alt=""/>
</a>

<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/5.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/05.jpg" alt=""/>
</a>

<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/4.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/04.jpg" alt=""/>
</a>

<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/3.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/03.jpg" alt=""/>
</a>

<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/2.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/02.jpg" alt=""/>
</a>


<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/1.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/01.jpg" alt=""/>
</a>

Are you looking for this? http://stackoverflow.com/questions/3235913/how-to-silently-hide-image-not-found-icon-when-src-source-image-is-not-found — Stephen C, Oct 13 '16 at 18:57
that's from this question that I add $("img").error(function(){ $(this).hide(); }); in my page. I forget something ? — coolio83000, Oct 13 '16 at 18:58
I'm not sure what the question is. With that code, the img tag will hide but the a tag will still be there. — Stephen C, Oct 13 '16 at 19:01
Yes when i open in my consol, I have that: Failed to load resource: the server responded with a status of 404 (Not Found), so my goal is to hide these images not found when I open my gallery or my page for thumbnails — coolio83000, Oct 13 '16 at 19:03
@StephenC Does I need to add a.class and img.class with $("img").error(function(){ $(this).hide(); }); — coolio83000, Oct 13 '16 at 19:09

score 1 · Accepted Answer · answered Oct 13 '16 at 19:15

How about removing the a:-

$("img").error(function() {
  $(this).parent().remove();
});

$("a.fancyboxgallery").fancybox();

<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js"></script>

<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/6.jpg" title="">
  <img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/06.jpg" alt="" />
</a>

<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/5.jpg" title="">
  <img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/05.jpg" alt="" />
</a>

<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/4.jpg" title="">
  <img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/04.jpg" alt="" />
</a>

<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/3.jpg" title="">
  <img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/03.jpg" alt="" />
</a>

<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/2.jpg" title="">
  <img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/02.jpg" alt="" />
</a>


<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/1.jpg" title="">
  <img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/01.jpg" alt="" />
</a>

How can I remove the balise of the not present too by the same time please because I have this warning in my consol: Failed to load resource: the server responded with a status of 404 (Not Found). I search for a solution since our last discussion !! — coolio83000, Oct 16 '16 at 09:31
you will have to receive the 404 in the console because the that is what causes the `.error` event. — BenG, Oct 16 '16 at 13:41
ah so I create my own error, can I fix it or there is no issue for that problem ? — coolio83000, Oct 16 '16 at 14:37
I tried to replace broken images, but nothing changes !!! I don't find the logic way to resolve this at this time !! — coolio83000, Oct 16 '16 at 15:31

score 0 · Answer 2 · answered Oct 13 '16 at 19:24

My guess is that the empty space is coming from the empty a tag, so you might want to select the parent instead. So instead of $(this).hide(); try $(this).parent().hide();.

Additionally, by using this method, you might want a more specific selector than just $('img'). So maybe try $('.fancyboxthumbnailsgallery').error(function(){ $(this).parent().hide(); });.

To hide all images, I would check for the the class and handle the hiding differently, like so:

$('img').error(function(){
    if($(this).hasClass('fancyboxthumbnailsgallery')){
        $(this).parent().hide();
    } else {
        $(this).hide();
    }
});

jQuery().parent()

hide or delete image not found with javascript or jquery

HERE IS MY GALLERY EXAMPLE

2 Answers2