Remove Image And Its Container If Image Is Broken

I am just trying to remove image and its title in case if image fails to load or broken using html or JavaScript.what is the best and easiest way to do that?

Solution 1:

You can accomplish this in one of two ways:

Either use the removeChild function (assuming you want to remove the elements and not hide them):

functionimgError(image) {
   // Get image rowvar imageRow = image.parentNode.parentNode;
   // Get image label rowvar imageLabel = imageRow.nextElementSibling;
   // Get table element of that image row and remove imageLabel
   imageRow.parentNode.removeChild(imageLabel);
   // Get table element of that image row and remove img element
   imageRow.parentNode.removeChild(imageRow);
}

Or you can instead hide your elements using the .style.visibility property of the image and label elements:

functionimgError(image) {
    // Get image rowvar imageRow = image.parentNode.parentNode;
    // Get image label rowvar imageLabel = imageRow.nextElementSibling;
    // Hide imageLabel
    imageRow.style.visibility = 'hidden';
    // Hide imageRow
    imageLabel.style.visibility = 'hidden';
}

Solution 2:

well, there are multiple approaches to do this :

here, I'm assuming that you want to use Pure javescript -no jquery- and keeping the original DOM document hierarchy.

<tableclass='mobileTable'><tr><td><imgsrc='path/to/broken/image.jpg'onerror='imgError(this)' /></td></tr><tr><tdclass='mobMidTitle'>some title</td></tr></table><script>functionimgError(image) {
    // this will step up to get the parent of the image's parentvar imgParent = image.parentElement.parentElement;
    // this will get the next sibling of the image grandpavar nextSib = imgParent.nextElementSibling;
    // reset it's html to empty
    nextSib.innerHTML = '';
    image.onerror = "";
    image.src = "http://localhost/domain/images/error.jpg";
    returntrue;
}
</script>

another easier approach is by adding new ID to your title TD and then remove it using javascript as follows :

/* here we've added id='mobMidTitle' */
<td  class='mobMidTitle' id='mobMidTitle' >some title</td>

<script>functionimgError(image) {
    image.onerror = "";
    image.src = "http://localhost/domain/images/error.jpg";
    document.getElementById('mobMidTitle').style.display = 'none';
    //                       ^^^^^^^^^^^returntrue;
}
</script>

Solution 3:

How about this JQuery javascipt (https://jquery.com) to hide any image that failed to load:

$("img").error(function() { $(this).hide(); });

or, if you want to hide its container you can do this:

$("img").error(function() { $(this).parent().hide(); });

or if you really want to remove the image, or container, use remove() instead of hide().

You could also display your own error image:

$("img").error(function() { $(this).attr("src","error.png"); });

Code has been tested and it works.

You can make it more specific by selecting only those images you want to hide or remove. Change $("img") to $(".hideOnError") and the use the class hideOnError on those images you want to hide or remove. Different actions could be take like replaceOnError. You can also apply this to other loadable elements.

In your specific case you have two elements you want to remove when an image fails. The best way to go about this is to associate the title with the image through attributes:

<tableclass='mobileTable'><tr><td><imgid='image1'src='<?phpecho$img?>'></td></tr><tr><tdid='image1title'class='mobMidTitle'><?phpecho$title?></td></tr></table>

As you can see, the id of the image here is image1 and the table cell containing the title has idimage1title. To remove image and title on error, while leaving the table structure intact, you do:

$("img").error(function() { 
  var id = $(this).attr('id');     // get id of image
  $(this).remove();                // remove image
  $("#"+id+"title").empty();       // remove title
});

Solution 4:

You can replace image if img tag has broken image. Please check below code

<imgsrc='brokenimage.jpg'onError="ImageError(this);"><scriptlanguage="JavaScript">functionImageError(img)
  {
    img.src = "https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
  }

</script>

Share