如何使用JavaScript在图片src为空时删除div

Question

嗨，我正在尝试弄清楚如何在图像资源为空时删除 div。

我在Stack Overflow上进行了搜索，但大多数都是基于 jq 的。是否有人可以帮助使用原生 JavaScript？

<div class="swiper-wrapper ">
      <div class="swiper-slide">
          <img
             src="https://images.unsplash.com/photo-1526947425960-945c6e72858f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fHByb2R1Y3RzfGVufDB8fDB8fA%3D%3D&w=1000&q=80"
             alt=""
             class="imgCard"
             color=""
           />
       </div>
       <div class="swiper-slide">
          <img
             src=""
             alt=""
             class="imgCard"
             color=""
           />
       </div>
</div>

- user17968935

---

你可以尝试使用类似这样的if语句：!HTMLImageElement.src。如果为空，则将div的显示样式更改为none，如下所示：HTMLDivElement.style.display = 'none'。 - K.K Designs

Answer 1

这是如何实现的：

在此处说明步骤

const swipers = document.querySelectorAll('.swiper-slide');

swipers.forEach(e => {
  const imgSource = e.querySelector('img').getAttribute('src');
  if (imgSource.trim() === '') {
    e.remove()
  }
})

<div class="swiper-wrapper ">
  <div class="swiper-slide">
    <img src="https://images.unsplash.com/photo-1526947425960-945c6e72858f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fHByb2R1Y3RzfGVufDB8fDB8fA%3D%3D&w=1000&q=80" alt="" class="imgCard" color="" />
  </div>
  <div class="swiper-slide">
    <img src="" alt="" class="imgCard" color="" />
  </div>
</div>

- Sourabh Semalty

Answer 2

你可以获取所有属于 .swiper-slide 类的图片，并检查它们是否具有不为空的 src 属性，如下所示。

let imgs = document.querySelectorAll(".swiper-slide img");

imgs.forEach(item => {
  if (item.getAttribute('src') === "") {
    item.parentNode.remove();
  }
});

<div class="swiper-wrapper ">
  <div class="swiper-slide">
    <img src="https://images.unsplash.com/photo-1526947425960-945c6e72858f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fHByb2R1Y3RzfGVufDB8fDB8fA%3D%3D&w=1000&q=80" alt="First image alternate text" class="imgCard" color="" />
  </div>
  <div class="swiper-slide">
    <img src="" alt="Second image alternate text" class="imgCard" color="" />
  </div>
</div>

- Yves Kipondo

---

你需要修剪源代码，因为有可能存在空格，这些空格不会为空。 - Sourabh Semalty