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

【问题标题】：How to select parent element by which include an img child with specific src attribute如何选择包含具有特定 src 属性的 img 子元素的父元素
【发布时间】：2018-03-03 14:48:33
【问题描述】：

我有一个像这样的图像列表：

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

【问题讨论】：

$(imgElmnt).parent().remove(); 将为 Jquery 做这件事。

标签： javascript jquery jquery-selectors

【解决方案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>

【讨论】：

我讨厌人们把 jQuery 塞进东西里。这在没有 jQuery 的情况下很容易实现，行数和复杂度不会改变，并且不需要你加载大约 30kb 的库
@zevee 哦不要讨厌任何东西 :) 它不好！让人们用他们想用的东西:)
好吧，让我拿我的指甲，再用一个钉子把它钉进去
@zevee 我同意 jQuery 是一个 30kb 的库，但基本上大多数时候人们打算在 30kb 和使事情变得更容易之间建立权衡。没关系..试着理解他们的情绪.. :)
您的代码和我的代码之间的区别实际上是 18 个字符。在某一时刻，它不再是making things easier，而是开始是adding on bloat

【解决方案2】：

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

【讨论】：

这使得 SO 成为一个伟大的开发者社区。人们可以建议他们喜欢的代码。如果你讨厌它，那就太糟糕了。只是不要把你的仇恨也推给其他人。
你怎么知道 OP 的 最佳利益，你知道他/她的全部代码吗？在这里，只发布了 sn-ps。例如，如果用户使用 wordress，则 jQuery 已经加载。那么既然可以使用 jQuery，为什么还要使用 vanilla。
你甚至不知道他/她是否已经在使用 jquery 库 @zevee。库的存在是为了使用它们
好的，我同意我不知道他们之前加载了什么。然而，不使用 jquery 仍然更快，即使它只是边际性能提升。
当然，每个人都知道。这个想法不是开创性的新闻。但是，人们仍然在使用它，因为它也提供了很多优势。我不是来为 jQuery 辩护的。您可能知道，我们想成为话题。如果你想讨论 jQuery 的速度。去找合适的帖子。只是说。

【解决方案3】：

你很亲密：

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

【讨论】：

如果您使用的是querySelectorAll(，那么您将需要获取第 0 个元素。 imgElmnt[0].
对。忘记了。