How to remove div if img src is empty with javascript

Question

Hi I am trying to figure out how to remove a div if the img src is empty.

I've searched on stackoverflow, but most are all jq based. Can someone help in vanilla 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>

You can probably use an if statement like this: !HTMLImageElement.src. If it's empty, then change the div display style to none like this: HTMLDivElement.style.display = 'none'. — Onyx
– Onyx, Commented Jan 20, 2022 at 6:18

kiner_shah · Accepted Answer · 2022-01-20 06:21:43Z

1

Here how you can do this

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>

edited Jan 20, 2022 at 6:21

kiner_shah

4,8137 gold badges30 silver badges44 bronze badges

answered Jan 20, 2022 at 6:19

Sourabh Semalty

907 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kiner_shah · Accepted Answer · 2022-01-20 06:24:17Z

1

You can get all images which are child of .swiper-slide class and check if their have src attribute different than an empty string like this

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>

edited Jan 20, 2022 at 6:24

kiner_shah

4,8137 gold badges30 silver badges44 bronze badges

answered Jan 20, 2022 at 6:21

Yves Kipondo

5,6931 gold badge22 silver badges33 bronze badges

1 Comment

Sourabh Semalty Over a year ago

You need to trim the source also, as there may be a chance that it contains space there which will not be empty

Collectives™ on Stack Overflow

How to remove div if img src is empty with javascript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related