Delete the image and its container if the image is broken
I am just trying to remove the image and its title in case the image fails to load or crashes using html or JavaScript. What's the best and easiest way to do this?
<?php
include("../includes/db.php"); // ../ means go to parent directory
$query='SELECT * FROM `table` WHERE tag NOT IN("news") ORDER BY `id` DESC LIMIT 0,5';
$run=mysqli_query($conn,$query);
while($row=mysqli_fetch_array($run)){
$img=$row['src'];
$title=$row['title'];
?>
<table class='mobileTable'>
<tr> <td><img src='<?php echo $img ?>' onerror='imgError(this)' /></td></tr>
<tr> <td class='mobMidTitle'><?php echo $title ?></td></tr>//i want to remove this title as well
</table>
<?php } ?>
<script>
function imgError(image) {
image.onerror = "";
image.src = "http://localhost/domain/images/error.jpg";
document.getElementById('tit').style.display='none';
return true;
}</script>
the code above will display 5 images from the database and with javascript I can change the image to error.jpg, but I want to delete both the image and its title only with an error.
source to share
You can accomplish this in one of two ways:
Use removeChild function (if you want to remove elements and not hide ):
function imgError(image) {
// Get image row
var imageRow = image.parentNode.parentNode;
// Get image label row
var 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 hide your elements instead using the .style.visibility
image elements and labels property :
function imgError(image) {
// Get image row
var imageRow = image.parentNode.parentNode;
// Get image label row
var imageLabel = imageRow.nextElementSibling;
// Hide imageLabel
imageRow.style.visibility = 'hidden';
// Hide imageRow
imageLabel.style.visibility = 'hidden';
}
source to share
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 your 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 hide()
.
You can also display your own error image:
$("img").error(function() { $(this).attr("src","error.png"); });
The code has been tested and it works.
You can make this more specific by selecting only the images you want to hide or remove. Change $("img")
to $(".hideOnError")
and use the class hideOnError
for whichever images you want to hide or remove. Various actions can be taken as replaceOnError
. You can also apply this to other downloadable items.
In your specific case, you have two elements that you want to remove when the image fails. The best way to do this is to associate the title with the image via attributes:
<table class='mobileTable'>
<tr><td><img id='image1' src='<?php echo $img ?>'></td></tr>
<tr><td id='image1title' class='mobMidTitle'><?php echo $title ?></td></tr>
</table>
As you can see, the id of the image is here image1
, and the table cell containing the title has an id image1title
. To remove the image and title on error while leaving the table structure intact, follow these steps:
$("img").error(function() {
var id = $(this).attr('id'); // get id of image
$(this).remove(); // remove image
$("#"+id+"title").empty(); // remove title
});
source to share
Well, there are several approaches for this:
here I am assuming you want to use Pure javescript -no jquery and keep the original DOM document hierarchy.
<table class='mobileTable'>
<tr> <td><img src='path/to/broken/image.jpg' onerror='imgError(this)' /></td></tr>
<tr> <td class='mobMidTitle'>some title</td></tr>
</table>
<script>
function imgError(image) {
// this will step up to get the parent of the image parent
var imgParent = image.parentElement.parentElement;
// this will get the next sibling of the image grandpa
var nextSib = imgParent.nextElementSibling;
// reset it html to empty
nextSib.innerHTML = '';
image.onerror = "";
image.src = "http://localhost/domain/images/error.jpg";
return true;
}
</script>
Another simple approach is to add a new ID to your header TD
and then remove it using javascript like this:
/* here we've added id='mobMidTitle' */
<td class='mobMidTitle' id='mobMidTitle' >some title</td>
<script>
function imgError(image) {
image.onerror = "";
image.src = "http://localhost/domain/images/error.jpg";
document.getElementById('mobMidTitle').style.display = 'none';
// ^^^^^^^^^^^
return true;
}
</script>
source to share
You can replace the image if the img tag has a broken image. Please check below code
<img src='brokenimage.jpg' onError="ImageError(this);">
<script language="JavaScript">
function ImageError(img)
{
img.src = "https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
}
</script>
source to share