如何选择并移除包含特定src属性img子元素的父元素

嘿，我来帮你搞定这两个问题！咱们分两部分说，先解决「选择符合条件的父元素」，再处理「移除它们」：

根据你的使用场景，我分CSS（样式展示）和JavaScript（交互操作）两种情况来给方案：

用CSS选择（用于样式标记） #

如果你只是想给这类父元素加样式高亮，CSS的:has()伪类绝对是最优解——它能直接选中包含指定子元素的父元素。

常用的匹配规则：

• 精确匹配src：父元素选择器:has(img[src="你的特定src值"])
  示例：div:has(img[src="target.png"]) —— 选中所有包含src为target.png的img的div父元素
• 模糊匹配（src包含某段字符串）：div:has(img[src*="target"])
• 匹配src开头的字符串：div:has(img[src^="https://your-domain.com/"])
• 匹配src结尾的字符串：div:has(img[src$=".png"])

举个验证用的示例代码：

/* 给符合条件的父元素加红色边框，方便确认选中效果 */
:has(img[src="target.png"]) {
  border: 2px solid red;
}

注意：:has()伪类已被Chrome、Firefox、Safari等现代浏览器支持，旧版IE不兼容哦～

用JavaScript选择（用于后续操作） #

如果需要对这些父元素做移除这类交互操作，就得用JS来获取它们：

方式1：先找目标img，再取父元素 #

// 找到所有src符合条件的img元素
const targetImgs = document.querySelectorAll('img[src="target.png"]');

// 用Set去重，避免同一个父元素被多次处理（比如一个父元素里有多个目标img）
const parentElements = new Set();

targetImgs.forEach(img => {
  const directParent = img.parentElement;
  if (directParent) {
    parentElements.add(directParent);
  }
});

// 现在parentElements里就是所有符合条件的父元素了
console.log(parentElements);

方式2：直接用:has()选择器（现代浏览器） #

如果你不需要兼容旧浏览器，也可以直接用:has()一步选中父元素：

const parentElements = document.querySelectorAll(':has(img[src="target.png"])');

扩展：找非直接父元素（比如某个祖先容器） #

如果要找的不是直接父元素，而是特定的祖先元素（比如带.card类的容器），可以用closest()：

targetImgs.forEach(img => {
  const ancestor = img.closest('.card');
  if (ancestor) {
    parentElements.add(ancestor);
  }
});

其实在上面JS获取父元素的基础上，加一步移除操作就搞定了！

直接在收集到父元素后，调用remove()方法：

// 接上面的代码，移除每个父元素
parentElements.forEach(parent => {
  parent.remove();
});

或者把两步合并成一行代码（更简洁）：

// 一步到位：找img → 取父元素 → 去重 → 移除
new Set(document.querySelectorAll('img[src="target.png"]').map(img => img.parentElement)).forEach(parent => {
  if (parent) parent.remove();
});

小提醒：加个if (parent)判断很有必要，避免因为img是顶级元素（比如直接在body下）导致parentElement为null的情况。

内容的提问来源于stack exchange，提问作者Rafeeq Mohamed