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>

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

Answer 2

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>

Answer 3

 myImgs = document.getElementsByClassName('imgCard'); for (i = 0; i < myImgs.length; i++) { if (myImgs[i].src == '') { myImgs[i].parentNode.style.display = 'none'; } }

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

In the above code, we are first getting all the Images using the getElementsByClassName() function
This function returns an array which we iterate using a for loop
In the for loop, we hide the parent element (div) by setting its display to none as removing the element will not be recommended and you could still bring it back if you want to.

Hope it solves your problem, Thank You!