JS Hiding Broken Images Within Class

Question

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();
});

mplungjan · Accepted Answer · 2020-11-04 11:09:47Z

3

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")
  })
})

answered Nov 4, 2020 at 11:09

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

StandardCitizen Over a year ago

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

worked amazingly well thank you.

mplungjan Over a year ago

You can just to const $this = $(this); and then $this.hide() if you want to hide the div with the background

Collectives™ on Stack Overflow

JS Hiding Broken Images Within Class

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related