如果图像损坏，则删除图像及其容器 [英] remove image and its container if image is broken

问题描述

我只是想删除图像及其标题，以防图像无法使用html或JavaScript加载或损坏.什么是最好，最简单的方法?

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?

<?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>

上面的

代码将从数据库中获取5张图像，并且可以使用javascript将图像更改为error.jpg，但我想同时删除这两个图像及其仅包含失败图像的标题.

code above will fetch 5 images from database and with javascript i can change image to error.jpg but i want to remove both image as well as its title only of failed image.

推荐答案

您可以通过以下两种方式之一来完成此任务:

You can accomplish this in one of two ways:

使用 removeChild 函数(假设您要删除元素，并不隐藏它们):

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

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);
}

或者您也可以使用图像和标签元素的 .style.visibility 属性隐藏您的元素:

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

 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';
}

这篇关于如果图像损坏，则删除图像及其容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！