Hola, estoy tratando de averiguar cómo eliminar un div si el img src está vacío.
He buscado en stackoverflow, pero la mayoría están basados en jq. ¿Alguien puede ayudar en javascript vainilla?
<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>Aquí cómo puedes hacer esto
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>Puede obtener todas las imágenes que son secundarias de la clase .swiper-slide y verificar si tienen un atributo src diferente a una cadena vacía como esta
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>