如何从jQuery包装的集合中删除后代元素？

Question

我对尝试选择一个元素然后从包装的集合中删除某些后代元素时使用哪种jQuery方法和/或选择器感到有些困惑。

例如，给定以下HTML：

<div id="article">
  <div id="inset">
    <ul>
      <li>This is bullet point #1.</li>
      <li>This is bullet point #2.</li>
      <li>This is bullet point #3.</li>
    </ul>
  </div>
  <p>This is the first paragraph of the article</p>
  <p>This is the second paragraph of the article</p>
  <p>This is the third paragraph of the article</p>
</div>

我要选择文章：

var $article = $('#article');

但随后<div id="inset"></div>从包装的集合中移除及其后代。我尝试了以下方法：

var $article = $('#article').not('#inset');

但这没有用，回想起来，我想我能明白为什么。我也尝试使用remove()失败。

正确的方法是什么？

最终，我需要以一种可以定义配置数组的方式进行设置，例如：

var selectors = [
  {
    select: '#article',
    exclude: ['#inset']
  }
];

其中，select定义一个包含文本内容的元素，并且exclude是一个可选数组，它定义一个或多个选择器以忽略文本内容。

给定最终的包装集并删除了排除的元素，我希望能够调用jQuery的text()方法以以下文本结尾：

这是本文的第一段。
这是本文的第二段。
这是本文的第三段。

配置阵列不需要完全那样工作，但是它应该提供大致等效的配置潜力。

感谢您的任何帮助，您可以提供！

Answer 1

我想您不想通过删除原始HTML元素来修改原始HTML，但是您只想获取没有插入内容的文章内容。这就是为什么我会使用clone（）获取文章的副本，然后从中删除插图的原因。

像这样：

$("#article").clone().find("#inset").remove().end().text()

• $（“＃article”）选择文章div，克隆创建副本，
• find可以删除孩子（您也可以使用孩子），
• remove（），删除选定的插图，
• end（）返回原始选择。

最后，我刚刚添加了text（），正如您提到的那样，您想这样做。