如何用jQuery移除Open Shadow Root内匹配元素的外层div.item？

问题背景 #

原本使用jQuery 3.7.1可以轻松移除带modified类span的外层div.item：

$("span.modified").closest("div.item").remove();

但当span.modified位于x-cover元素的Open Shadow Root内部时，这段代码完全失效。错误尝试的写法也无法解决问题：

$("span.modified").shadowRoot.closest("div.item").remove();

核心原因是jQuery无法穿透Shadow DOM，而要移除的div.item并不在Shadow Root内部，需要结合原生JS实现跨Shadow DOM的元素查找与操作。

解决方案思路 #

结合jQuery和原生JavaScript分步处理：

• 用jQuery定位所有包含Shadow DOM的x-cover元素
• 遍历每个x-cover，用原生JS访问其Shadow Root
• 在Shadow Root内部查找所有span.modified
• 对找到的每个span，向上遍历DOM树找到外层的div.item并移除

完整实现代码 #

// 先处理主DOM中不在Shadow内的span.modified
$("span.modified").closest("div.item").remove();

// 处理Shadow DOM内的span.modified
$("x-cover").each(function() {
  // 获取当前元素的Shadow Root，跳过无Shadow Root的元素
  const shadowRoot = this.shadowRoot;
  if (!shadowRoot) return;

  // 在Shadow Root内查找所有目标span
  const modifiedSpans = shadowRoot.querySelectorAll("span.modified");
  
  // 遍历每个span，找到对应的div.item并移除
  modifiedSpans.forEach(span => {
    const targetDiv = span.closest("div.item");
    if (targetDiv) {
      targetDiv.remove();
    }
  });
});

关键说明 #

1. 原生JS的shadowRoot属性是访问Shadow DOM内部的唯一入口，jQuery没有对应的API
2. closest()方法可以穿透Shadow Root边界，从Shadow DOM内的元素向上查找主DOM中的父元素
3. 保留原jQuery代码可以同时处理主DOM和Shadow DOM外的目标元素，确保全覆盖

内容的提问来源于stack exchange，提问作者Jane Wilkie