如何在jQuery对象中移除父div内的子div且不修改DOM？

你需要创建一个脱离页面DOM的jQuery对象副本，在这个副本上进行移除操作，完全不会影响页面上的真实元素，具体步骤如下：

1. 将获取到的父元素HTML内容，包装成一个新的jQuery对象（这个对象不在页面DOM树中，属于内存中的副本）
2. 在这个副本对象内，找到需要移除的子div并删除
3. 之后可以根据需要获取处理后的HTML，或者直接使用这个处理好的jQuery对象

具体代码实现 #

// 1. 获取父元素的HTML，并创建脱离DOM的jQuery副本
var $parentCopy = $('<div>').html($("#parent").html());

// 2. 在副本中移除所有id为child的子div（注意：实际开发中id不能重复，建议改用class）
$parentCopy.find('#child').remove();

// 3. 此时$parentCopy就是处理后的对象，可获取其HTML或者做其他操作
var processedHtml = $parentCopy.html();

补充说明 #

• 这里用$('<div>').html(...)来创建一个临时容器，把父元素的HTML内容放进去，这样就得到了一个独立的DOM副本，操作它不会影响页面上的真实#parent元素
• 你代码里出现了重复的id="child"，这不符合HTML规范，实际开发中应该改用class（比如class="child"），对应的选择器改成.child，避免出现选择器匹配异常的问题

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