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

Question

I have a list of images like so:

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

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

My guess:

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

Desired result:

<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()

You were applying jQuery methods on HTML DOM Elements, instead they are applicable only on jQuery objects.

And in case you want to achieve this using plain javascript then do

 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

You were close:

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

Answer 3

You can select the image by source by [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>