如何选择包含具有特定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>

如何选择和删除包含具有特定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

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