How do I remove/hide image container on error

by

I have been looking here for answers and tried a lot of different things that I found on here but unfortunately none of them have worked 100% for me…

I am using a Flickity image carousel. What I want to do is hide the image container if the image doesn’t exist.

I have tried the following:

$(".hideOnError").error(function() {
  $(this).parent().remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="main-carousel" data-flickity='{ "cellAlign": "left", "contain": true, "wrapAround": true, "fullscreen": true, "draggable": false }'>

<div class="carousel-cell">
<img src="{{"https://f.hubspotusercontent40.net/hubfs/6269990/Media/Produktbilder/B1/B1_" + row.artikelnummer + ".jpg"}}" alt="{{row.produktname}}}"></div>

<div class="carousel-cell hideOnError">
<img src="{{"https://f.hubspotusercontent40.net/hubfs/6269990/Media/Produktbilder/B3/B3_" + row.artikelnummer + ".jpg"}}" alt="{{row.produktname}}}"></div>

<div class="carousel-cell hideOnError">
<img src="{{"https://f.hubspotusercontent40.net/hubfs/6269990/Media/Produktbilder/AB/AB_" + row.artikelnummer + ".jpg"}}" alt="{{row.produktname}}}"></div>

<div class="carousel-cell hideOnError">
<img src="{{"https://f.hubspotusercontent40.net/hubfs/6269990/Media/Produktbilder/F/F1_" + row.artikelnummer + ".jpg"}}" alt="{{row.produktname}}}"></div>

<div class="carousel-cell hideOnError">
<img src="{{"https://f.hubspotusercontent40.net/hubfs/6269990/Media/Produktbilder/F/F2_" + row.artikelnummer + ".jpg"}}" alt="{{row.produktname}}}"></div>

<div class="carousel-cell hideOnError">
<img src="{{"https://f.hubspotusercontent40.net/hubfs/6269990/Media/Produktbilder/F/F3_" + row.artikelnummer + ".jpg"}}" alt="{{row.produktname}}}"></div>

<div class="carousel-cell hideOnError">
<img src="{{"https://f.hubspotusercontent40.net/hubfs/6269990/Media/Produktbilder/F/F4_" + row.artikelnummer + ".jpg"}}" alt="{{row.produktname}}}"></div>

<div class="carousel-cell hideOnError">
<img src="{{"https://f.hubspotusercontent40.net/hubfs/6269990/Media/Produktbilder/F/F5_" + row.artikelnummer + ".jpg"}}" alt="{{row.produktname}}}"></div>

<div class="carousel-cell hideOnError">
<img src="{{"https://f.hubspotusercontent40.net/hubfs/6269990/Media/Produktbilder/MB/MB_" + row.artikelnummer + ".jpg"}}" alt="{{row.produktname}}}"></div>
  </div>

I’ve also tried it with this:

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

I found this here: remove image and its container if image is broken

Both removes the image but the image container is still there and the image slider shows an empty white slide. What I want it to do is remove the image container completely so that just the working image(s) is shown.
I’m a total beginner with JS/JQuery and I’ve been googling and trying things the last week but haven’t been able to find something that works. Any help is greatly appreciated!

1 thought on “How do I remove/hide image container on error”

  1. Your code triggers the error handler before the handler is redefined by you.

    Also .error() is deprecated and removed since jQuery 3.x

    API Note: This API has been removed in jQuery 3.0; please use .on( "error", handler ) instead of .error( handler ) and .trigger( "error" ) instead of .error()

    I would do this

    const imgUrl = "https://f.hubspotusercontent40.net/hubfs/6269990/Media/Produktbilder/";
const prodName = "{{row.produktname}}";
const artNum = "{{row.artikelnummer}}"
const html = ["B1/B1", "B3/B3", "AB/AB", "F/F1", "F/F2", "F/F3", "F/F4", "F/F5", "MB/MB"]
  .map(folder => `<div class="carousel-cell hideOnError">
    <img src="${imgUrl}/${folder}"_${artNum}.jpg" alt="${prodName}"
     onerror="$(this).closest('div.hideOnError').remove()">
  </div>`).join("");
$(".main-carousel").html(html);

    <div class="carousel-cell"></div>

    Alternative:

    <div class="carousel-cell">
  <img src="dummy.gif" 
    onload="if (this.src.includes('dummy')) this.src=this.dataset.src"
    onerror="$(this).closest('div.hideOnError').remove()"
    data-src="{{"https://f.hubspotusercontent40.net/hubfs/6269990/Media/Produktbilder/B1/B1_" + row.artikelnummer + ".jpg"}}" alt="{{row.produktname}}}"></div>
    Reply

Leave a Comment