CODEWITHSUNDEEP
javascriptjquery
StandardCitizen
StandardCitizen

Reputation: 81

JS Hiding Broken Images Within Class

I understand how to hide images if they're as followed,

<img src=""......>

However, I'm having problems as I know nothing about JS on how to hide broken images if they're like this,

<div class="lx-g3-f" >
  <div class="lx-gallery" data-bg="image_url" alt="alt text" referrerpolicy="no-referrer" title="something title">
  <div class="lx-gallery-title" >
    <h3><a href='something_img_url' referrerpolicy="no-referrer">click here!</a></h3>
  </div>
</div>

How can I make the following work when img doesn't exist.

$("img").on("error", function() {
    $(this).closest('.lx-g3-f').hide();
});

Upvotes: 2

Views: 68

Answers (1)

mplungjan
mplungjan

Reputation: 178285

Not trivial

Try

$(function() {
  $("[data-bg]").each(function() {
    const $parent = $(this).closest(".lx-g3-f")
    const img = new Image();
    img.onerror=function() {
      $parent.hide();
    }
    img.src=$(this).data("bg")
  })
})

Upvotes: 3

Related Questions