如何选择包含具有特定src属性的img子元素的父元素
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何选择包含具有特定src属性的img子元素的父元素相关的知识，希望对你有一定的参考价值。
我有一个像这样的图像列表：
<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>
答案
$("img[src='def.jpg']").parent().remove()
您在html DOM Elements上应用了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>另一答案
您可以通过[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>另一答案
你很亲密：
var imgElmnt = document.querySelector("img[src='def.jpg']");
imgElmnt.parentNode.remove();
以上是关于如何选择包含具有特定src属性的img子元素的父元素的主要内容，如果未能解决你的问题，请参考以下文章