Deleteing a div based on the image source it contains using Javascript

Question

I am using swiper for a carousel and I am adding remove functionality to remove images. I want to delete specific div with same name("swiper-slide") using the src of the image inside the div. I don't know if this possible, can anyone help me with this? I am specifically trying to use Javascript and not Jquery.

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" id="slide4">
            <img src="/Media/Default/Uploads/test-23.png" border="0" alt="" width="1097" height="361" />
        </div>
        <div class="swiper-slide" id="slide3">
            <img src="/Media/Default/Uploads/knockoutjs-teaser.jpg" border="0" alt="" width="900" height="506" />
        </div>
        <div class="swiper-slide" id="slide1">
            <img src="/Media/Default/Uploads/1556269682222.jpg" border="0" alt="" width="1305" height="548" /> &nbsp;
        </div>
        <div class="swiper-slide" id="slide2">
            <img src="/Media/Default/Uploads/duales-studium-berlin.jpg" border="0" alt="" width="3300" height="2475" /> &nbsp;
        </div>
    </div>
</div>

Which div with a specific name are you referring to? None of the elements here have a name attribute — Professor Abronsius
– Professor Abronsius, Commented Jul 28, 2021 at 7:56
@Nitesh I want to delete a div which contains specific image src — Sudheer
– Sudheer, Commented Jul 28, 2021 at 7:59

Chrillewoodz · Accepted Answer · 2021-07-28 07:57:18Z

2

Try this:

function remove(src) {
    var img = document.querySelector('img[src="' + src + '"]');
    var parent = img.closest('.swiper-slide');
    var grandparent = parent.closest('.swiper-wrapper');
    
    grandparent.removeChild(parent);
}

And pass the src you want to remove.

Demo: https://jsfiddle.net/wvof2qdt/1/

answered Jul 28, 2021 at 7:57

Chrillewoodz

28.5k23 gold badges102 silver badges189 bronze badges

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

1 Comment

Sudheer Over a year ago

Thanks for the answer, this along with 'back2dos' answer combined i made it work, thanks for the help

back2dos · Accepted Answer · 2021-07-28 07:58:39Z

1

You're going to have to find the image and then remove its parent. This should work (not tested):

function removeSlide(imgSrc) {
  var selector = '.swiper-slide>img[src="' + selector + '"]';// selector for the image to be removed
  var image = document.querySelector(selector);// let's get the image
  if (image) {// if an image was found
    image.parentElement.remove();// remove its parent (the div)
  }
  return !!image; // returns true if an image was found
}

answered Jul 28, 2021 at 7:58

back2dos

15.6k36 silver badges52 bronze badges

1 Comment

Sudheer Over a year ago

Thanks for the answer, this works too. I have tested

Collectives™ on Stack Overflow

Deleteing a div based on the image source it contains using Javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related