如何隐藏Bootstrap轮播中加载失败图片的父容器div？

当Bootstrap轮播中的图片加载失败时，可通过监听图片的onerror事件，触发后隐藏其对应的.carousel-item父容器。以下是两种可行实现方案：

方案一：使用jQuery实现 #

利用jQuery的DOM选择器和事件绑定，精准针对轮播内的图片处理：

$(document).ready(function() {
  // 仅选择轮播组件内的图片，避免影响页面其他图片
  $('.carousel-item img').each(function() {
    this.onerror = function() {
      // 向上查找最近的.carousel-item父容器并隐藏
      $(this).closest('.carousel-item').hide();
    };
  });
});

对应的HTML结构示例：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- Bootstrap轮播核心结构（仅展示轮播项部分） -->
<div class="carousel-item" id="Slide010">
  <img class="d-block w-100" src="/sites/Yo/Flyers/Pic010.jpg" alt="Slide10" />
</div>
<div class="carousel-item" id="Slide005">
  <img class="d-block w-100" src="/sites/Yo/Flyers/Pic005.jpg" alt="Slide05" />
</div>

方案二：纯JavaScript实现（无需jQuery） #

如果项目中不依赖jQuery，可直接用原生JS实现相同逻辑：

document.addEventListener('DOMContentLoaded', function() {
  // 获取所有轮播内的图片元素
  const carouselImgs = document.querySelectorAll('.carousel-item img');
  carouselImgs.forEach(img => {
    img.onerror = function() {
      // 找到最近的.carousel-item父容器并设置隐藏
      this.closest('.carousel-item').style.display = 'none';
    };
  });
});

关键说明 #

• 用.carousel-item img作为选择器，确保仅处理轮播组件内的图片，避免干扰页面其他元素
• closest('.carousel-item')相比直接用parent()更可靠，即使图片外层嵌套了其他标签，也能精准找到目标父容器
• 隐藏操作会将.carousel-item设置为display: none，不会占用页面布局空间，适配Bootstrap轮播的自动切换逻辑

内容的提问来源于stack exchange，提问作者Hammy