CSS code to hide HTML image when onerror event occurs

How can I hide the entire li element if the image 1.jpg is broken, as if it never existed in the DOM? I have a list of images where each image is wrapped in an li tag. I came across some useful JavaScript on how to hide the image and discovered from another post on SO that there are several options available when the “When” function is called instead of leaving the broken image, such as replacing it with a different image or removing the element from the DOM. For further information, please refer to the following resources: “How to replace HTML img broken by missing or erroring image src” and “How to hide image broken Icon using only CSS/HTML?


Question:

I possess a collection of pictures that are enclosed within an HTML list item (li).

  • Is it possible to completely conceal the aforementioned “li” element from the DOM if “image 1.jpg” is damaged, as if it was never there to begin with?

    I came across helpful JavaScript code that taught me how to conceal an image, and I discovered from a different post on SO that it’s advisable to use

    display:none

    to avoid generating an empty line. However, I am encountering difficulties in merging these two pieces of information.


    Solution 1:

    An image can be managed with a handler specified as

    onerror

    .

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

    Alternatively, you have the option to eliminate it entirely, effectively erasing its existence from the DOM.

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

    To avoid placing an

    onerror

    handler in the HTML, which is the only reliable location, you can initially hide the images and subsequently verify

    .complete

    upon loading. If the image is not yet complete, you can then install a

    .load()

    handler when your
    jQuery runs
    is triggered.

    CSS:

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

    jQuery:

    $("li img").each(function() {
        if (this.complete) {
            // 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();
            });
        }
    });
    


    Solution 2:


    The .error method is available in jQuery and can be accessed through http://api.jquery.com/error/.

    Example:

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


    Solution 3:


    By utilizing jQuery, it’s possible to configure

    <li>

    to exclusively load after

    <img>

    has been loaded. Further details can be found by reading on.

    HTML starts as:

  • To select an image on a webpage, you can assign it a class if it belongs to a group, an ID if it’s unique, or choose all images on the page. In this example, I’ll opt to use the class to select the image as part of a group.

    jQuery:

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

    Essentially, the content remains concealed until the picture is fully loaded.


    Solution 4:

    You can use this:

    
    

    In case of an error, manage the image appropriately. If the image is not found, retrieve its ID and delete it from the DOM.

    Frequently Asked Questions