jQuery如何在移除指定DOM元素后获取剩余的HTML内容

代码存在两个核心问题导致效果不符合预期：

1. 每次执行$(html)都会基于原始HTML字符串重新生成一份全新的独立DOM对象，之前调用$(html).find('#H9').remove()是对第一份临时生成的对象做修改，后续取内容时又重新执行$(html)生成了未做任何修改的新对象，删除操作完全没有留存
2. 定义data变量时<h1>标签没有闭合，末尾少了>，属于HTML语法错误，会导致DOM解析异常

• 首先修正HTML字符串的语法错误，补全h1标签的闭合尖括号
• 把HTML解析生成的jQuery对象存到固定变量中，所有查找、删除、取值操作都基于这个存好的对象执行，不要重复调用$(html)生成新对象

修复后可正常运行的完整代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="view"></div>

<script>
// 补全h1标签缺失的闭合尖括号
var data = '<h1 id="H9">Hi World</h1>';
var html = '<div id="rendered">' + data + '</div>';
// 仅解析一次HTML，缓存生成的jQuery对象
const $renderedNode = $(html);
console.log($renderedNode.find('#H9').length);
// 在缓存的对象上执行删除操作
$renderedNode.find('#H9').remove();
// 从修改后的缓存对象取内容渲染
$('#view').html($renderedNode.html());
</script>

执行上述代码后，页面#view容器内最终只会保留空的<div id="rendered"></div>，完全符合预期效果。

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