如何使用jQuery从父元素移除指定子节点，仅保留div.content元素？

你不需要逐个删除所有不需要的元素，直接提取目标元素的完整代码即可，实现起来更简单不易出错。

方法1：基于你当前用到的jQuery实现 #

// 直接获取class为content的div的完整HTML代码
const targetHtml = $('div.content').prop('outerHTML');
// 输出验证
console.log(targetHtml);

// 如果需要把当前页面的内容直接替换为目标结果，添加下面这行
document.write(targetHtml);

如果你一定要用逐个移除的逻辑，补上你之前漏删的元素即可：

// 移除所有不需要的子元素
$('head, header, footer, .adv, script').remove();
// 把content元素从外层嵌套标签中提取出来，覆盖整页内容
document.body.innerHTML = $('div.content').prop('outerHTML');

方法2：纯原生JS实现（不需要依赖jQuery） #

const contentEl = document.querySelector('div.content');
const targetHtml = contentEl.outerHTML;
console.log(targetHtml);

// 替换整页内容
document.documentElement.innerHTML = targetHtml;

两种方法输出的结果都和你期望的完全一致：

<div class="content">
    Web Test...!
</div>

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