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