CSS/Javascript to detect broken image, and hide parent div

Question

<div class="A">
   <a href="abc"><img class="A" alt=" " src="/1.jpg"></a>
</div>

I need a javascript to detect if image broken,make div height to 0px,basically to hide it. Or are there any css to do it?

<script> $('.A').find('img').length == 0){
       $(this).hide();

    }</script>

Answer 1

To check if an image has completely loaded, you can check if it is complete like this:

$.ready(function(){
    //I'm guessing that's how find() works, correct me if I'm wrong
    if($('.A').find("img")[0].complete){

            console.log("successfully loaded!")
      }else{
           $('.A').find("div")[0].hide();
      }
}

A pure JS Solution is:

document.onload=function(){
    if(document.getElementById("image").complete){
        console.log("complete")
    }else{
        document.getElementById("imgwrap").style.display="none";
    }
}

Answer 2

The exact code you are searching for is something like this:

<div class="A">
    <a href="abc"><img src="/1.jpg" onerror="this.parentNode.style.display='none'" class="A" alt=" " /></a>
</div>

The error event in the img tag makes its parent node div to be hidden. This should work.