Удаление div на основе источника изображения, который он содержит, с помощью Javascript

#javascript #html

Вопрос:

Я использую swiper для карусели и добавляю функцию удаления для удаления изображений. Я хочу удалить конкретный div с тем же именем(«swiper-слайд»), используя src изображения внутри div. Я не знаю, возможно ли это, может ли кто-нибудь помочь мне с этим? Я специально пытаюсь использовать Javascript, а не 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" /> amp;nbsp;
        </div>
        <div class="swiper-slide" id="slide2">
            <img src="/Media/Default/Uploads/duales-studium-berlin.jpg" border="0" alt="" width="3300" height="2475" /> amp;nbsp;
        </div>
    </div>
</div>

1. Не могли бы вы, пожалуйста, объяснить на примере, чего вы хотите достичь?

2. Какой раздел с конкретным именем вы имеете в виду? Ни один из элементов здесь не имеет name атрибута

3. @ProfessorAbronsius извините, я ошибся, я имел в виду название класса

4. @Nitesh Я хочу удалить div, содержащий конкретное изображение src

Ответ №1:

Попробуйте это:

 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);
}

И передайте src, который вы хотите удалить.

Демо: https://jsfiddle.net/wvof2qdt/1/

Ответ №2:

Вам придется найти изображение, а затем удалить его родителя. Это должно сработать (не проверено):

 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
}