如何用jQuery从带子元素的克隆元素中移除指定类的所有节点

我来帮你搞定这个问题！你遇到的核心问题是移除方法的调用对象错了——让我给你拆解一下：

原代码的问题 #

你写的clone = $(clone).remove('.remove');其实是在尝试从clone这个集合（也就是克隆出来的#el元素）里移除匹配.remove的元素，但#el本身并不带.remove类啊！那些需要删掉的元素是它的子元素，所以这个调用根本找不到要移除的目标，自然没效果。

你之前用$(clone).find('.remove').length能得到正确数量，是因为find()确实能定位到这些子元素，但你没把移除操作作用在这些子元素上，才会出现“能找到但删不掉”的尴尬情况。

正确的解决方案 #

我们需要先定位到克隆元素内部的.remove子元素，再对它们执行移除操作。这里有两种常用写法：

写法1：分步操作（更清晰）

// 克隆原元素
var clone = $('#el').clone();
// 找到克隆元素里所有的.remove子元素并移除
clone.find('.remove').remove();
// 获取处理后的HTML内容
var cloneHtml = clone.html();
console.log(cloneHtml);

写法2：链式调用（更简洁）

如果你喜欢链式写法，可以用end()方法回到之前的克隆元素上下文：

var cloneHtml = $('#el')
  .clone()          // 克隆原元素
  .find('.remove')  // 定位内部的.remove元素
  .remove()         // 移除这些元素
  .end()            // 回到克隆的#el元素上下文
  .html();          // 获取处理后的HTML

console.log(cloneHtml);

这两种写法都会得到你期望的结果：只保留带有.remain类的子元素的克隆HTML。

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