how to hide a parent div if image is missing

Question

I'm trying to use a script to change the visibility of a div if an image inside it is missing

here is the div:

 <div id="bike01">
<a href="stock/bike1.html">
<table width="900" border="0" cellpadding="3" cellspacing="0" class="table">
<tr>
  <td width="245" rowspan="2"><img id="bike1" src="stock/bike1/images/image1.jpg" name="bike1" width="245" height="184" />
  </td>
  <td width="468"><div id="title1"></div></td>
</tr>
<tr>
  <td colspan="2"><div id="desc1"></div></td>
</tr>
</table>
</a>
</div>

and here is my script (I am a complete beginner when it comes to scripting - ive just picked this up from researching my question)

 <script>
$("#bike1").error(function () { 
$("#bike01").css({visibility:"hidden"});  
});
</script>

Basically if the img#bike1 is missing i want the whole div #bike01 to disappear.

possible duplicate of [How do I hide broken images in javascript?](http://stackoverflow.com/questions/3675073/how-do-i-hide-broken-images-in-javascript) — sdgluck, Aug 17 '15 at 20:00

score 1 · Accepted Answer · edited May 23 '17 at 10:33

1

Why not do:

<img id="bike1" src="stock/bike1/images/image1.jpg" onerror="this.style.display='none';" />

How do I hide broken images in javascript?

<img id="bike1" src="stock/bike1/images/image1.jpg" onerror='$("#bike01").css({visibility:"hidden"});' />

edited May 23 '17 at 10:33

Community

1
1

answered Aug 17 '15 at 19:59

Stephen King

816
4
14

He said the parent Div not the image itself – DieVeenman Aug 17 '15 at 20:01
that works to hide the image but I want to hide the parent div #bike01 – Stephen Aug 17 '15 at 20:02
Updated for the div too. – Stephen King Aug 17 '15 at 20:03

score 0 · Answer 2 · edited Aug 17 '15 at 22:57

0

Try this:

<script>
    $("#bike1").on('error', function() {
        $("#bike01").hide();
    });
</script>

edited Aug 17 '15 at 22:57

Sushil

2,837
4
21
29

answered Aug 17 '15 at 20:00

DieVeenman

457
1
3
18

how to hide a parent div if image is missing

2 Answers2