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>

如何选择和删除父元素，其中包含具有特定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

Map<keyType, valueType>

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

如果你想使用普通的javascript实现这一点，那么

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

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

Answer 2

你很亲密：

<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 3

您可以按[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>

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

3 个答案: