如何使用jQuery通过元素节点查找并从父节点中移除对应节点？

你的代码失效是因为$(searchNode)是新创建的DOM元素，和parentNode里的节点不是同一个对象引用，jQuery的remove()没法匹配到目标节点。

要实现需求，得靠元素的结构层级来定位目标节点，再执行移除操作：

解决方案代码 #

var searchNode = `<div>
                  <header></header>
            </div>`;

var parentNode = `<div class="parent">
                     ..........
                     <div>
                       <header></header>
                     </div>
                 </div>`;

// 把parentNode转为可操作的jQuery对象
const $parent = $(parentNode);

// 方式1：通过:has选择器直接匹配包含header的div
$parent.find('div:has(header)').remove();

// 方式2：更精准匹配直接包含header的div（header是div的直接子元素）
// $parent.find('div > header').parent().remove();

// 查看处理后的结果
console.log($parent.html());

补充说明 #

如果实际结构更复杂，可以通过以下方式提升定位精度：

• 匹配子元素位置：比如div:has(> header:eq(0))（确保div的第一个直接子元素是header）
• 匹配元素文本：如果header有固定文本，用div:has(header:contains("目标文本"))
• 多层级精确匹配：比如div.parent > div > header这种完整层级选择器

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