I have a list of images where each image is wrapped in a li:

<li><a href=''><img src='.jpg'></a></li>

How can I hide this entire li if image 1.jpg is broken as if it never existed in the DOM?

I found some good js on how to hide the image and learned from another SO post that I want to display:none so I don't create an empty row. But I'm having trouble putting these together.

I have a list of images where each image is wrapped in a li:

<li><a href='http://www.so.'><img src='http://www.so./1.jpg'></a></li>

How can I hide this entire li if image 1.jpg is broken as if it never existed in the DOM?

I found some good js on how to hide the image and learned from another SO post that I want to display:none so I don't create an empty row. But I'm having trouble putting these together.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited May 23, 2017 at 12:19 CommunityBot 111 silver badge asked Nov 24, 2013 at 2:40 ChrisChris 18.9k1515 gold badges6262 silver badges7979 bronze badges 3

• can you put together a jsfiddle of this issue ? – karthikr Commented Nov 24, 2013 at 2:41
• @karthikr Ill start working on that right now and edit the question with the link. Thank you, good idea. – Chris Commented Nov 24, 2013 at 2:44
• jsfiddle/H7Aq7/6 – Chris Commented Nov 24, 2013 at 3:24

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 8

You can use an onerror handler for the image:

<li><a href='http://www.so.'>
<img src='http://www.so./1.jpg' onerror='hideContainer(this)'>
</a></li>

// this function must be in the global scope
function hideContainer(el) {
    $(el).closest("li").hide();
}

Or, you could even just remove it if you really want it as if it never existing in the DOM:

// this function must be in the global scope
function hideContainer(el) {
    $(el).closest("li").remove();
}

---

If you don't want to put an onerror handler in the HTML (the only reliable place you can put it) then you can hide the images initially and then check .plete when your jQuery runs and if the image is not yet plete, then install a .load() handler like this:

CSS:

/* use some more specific selector than this */
li {display: none;}

jQuery:

$("li img").each(function() {
    if (this.plete) {
        // img already loaded successfully, show it
        $(this).closest("li").show();
    } else {
        // not loaded yet so install a .load handler to see if it loads
        $(this).load(function() {
            // loaded successfully so show it
            $(this).closest("li").show();
        });
    }
});

In jQuery there is .error event handler http://api.jquery./error/.

Example:

$('img').error(function(event) {
   $(this).closest('li').hide();     

});

Using jQuery you can set your <li> to load ONLY IF the <img> loads. Read along here.

HTML starts as:

<li style="display: none;"><a href='http://www.so.'><img src='http://www.so./1.jpg' id="imgOne" class="imgSet"></a></li>

Either give it a class if it's part of a group, an ID if it's very specific and you just want that one, or select all the images on the page if you want. For my example I'll use the class to select it as a group.

jQuery:

$('.imgSet').load(function() {
    $(this).parents('li').show();
});

Basically it's hidden until the image loads.

You can use this:

<img id='any' src="https://invalid." onerror="document.getElementById(this.id).remove()" >

on error handle the image and if not found get its id and remove itself from the DOM