如何 select 包含具有特定 src 属性的 img 子元素的父元素

Question

我有一个这样的图片列表：

<div>
    <div class="imgCnr">
    <img src="abc.jpg">
    </div>
    <div class="imgCnr">
    <img src="def.jpg">
    </div>
    <div class="imgCnr">
    <img src="ghi.jpg">
    </div>
    <div class="imgCnr">
    <img src="jkl.jpg">
    </div>
</div>

如何 select 并删除包含具有特定 src 属性的 img 子元素的父元素

我的猜测：

var imgElmnt = document.querySelectorAll("imgCnr > img[src='def.jpg']");
imgElmnt.parent().remove();

想要的结果：

<div>
    <div class="imgCnr">
    <img src="abc.jpg">
    </div>
    <div class="imgCnr">
    <img src="ghi.jpg">
    </div>
    <div class="imgCnr">
    <img src="jkl.jpg">
    </div>
</div>

Answer 1

$("img[src='def.jpg']").parent().remove()

您在 HTML DOM 元素上应用了 jQuery 方法，但它们仅适用于 jQuery 对象。

如果您想使用普通 javascript 实现此目的，请执行

var imgElmnt = document.querySelectorAll("img[src='def.jpg']");
imgElmnt[0].parentNode.remove();

<div>
  <div class="imgCnr">
    <img src="abc.jpg">
  </div>
  <div class="imgCnr">
    <img src="def.jpg">
  </div>
  <div class="imgCnr">
    <img src="ghi.jpg">
  </div>
  <div class="imgCnr">
    <img src="jkl.jpg">
  </div>
</div>

Answer 2

你很接近：

var imgElmnt = document.querySelector("img[src='def.jpg']");
imgElmnt.parentNode.remove();

Answer 3

您可以 select 按 [src='source']

来源的图像

$(function() {
 let toRemove = "def.jpg";
 $("div img[src='" + toRemove + "']").parent().remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class="imgCnr">
    <img src="abc.jpg">
  </div>
  <div class="imgCnr">
    <img src="def.jpg">
  </div>
  <div class="imgCnr">
    <img src="ghi.jpg">
  </div>
  <div class="imgCnr">
    <img src="jkl.jpg">
  </div>
</div>

如何 select 包含具有特定 src 属性的 img 子元素的父元素

How to select parent element by which include an img child with specific src attribute

javascript

jquery

jquery-selectors