使用 Javascript 根据包含的图像源删除 div

Question

我正在使用 swiper 作为轮播，并且我正在添加删除功能来删除图像。我想使用 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" /> &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>

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

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