javascript - 删除容器外的所有元素？

Question

我正在尝试找到一种方法来删除特定容器之外的所有元素(div)。

例如:

我有一个 HTML 容器，里面有一些 div，如下所示:

<div id="container">
    <div class="baby"></div>
    <div class="baby"></div>
    <div class="baby"></div>
    <div class="baby"></div>
</div>
<div id="someID">
    <div class="baby"></div>
    <div class="baby"></div>
    <div class="baby"></div>
</div>
<div class="baby"></div>
<div class="baby"></div>
<div class="baby"></div>

我基本上需要删除 container 之外的类名为 baby 的所有元素。有些元素甚至没有容器，所以我无法使用父元素或类似的东西来定位它们。

这可能吗？

Answer 1

您可以使用 :not() 或 not() 避免 #container

中的元素

$('.baby:not(#container .baby)').remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
  <div class="baby">1</div>
  <div class="baby">1</div>
  <div class="baby">1</div>
  <div class="baby">1</div>
</div>
<div id="someID">
  <div class="baby">2</div>
  <div class="baby">2</div>
  <div class="baby">2</div>
</div>
<div class="baby">3</div>
<div class="baby">3</div>
<div class="baby">3</div>

---

使用 not()

$('.baby').not('#container .baby').remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
  <div class="baby">1</div>
  <div class="baby">1</div>
  <div class="baby">1</div>
  <div class="baby">1</div>
</div>
<div id="someID">
  <div class="baby">2</div>
  <div class="baby">2</div>
  <div class="baby">2</div>
</div>
<div class="baby">3</div>
<div class="baby">3</div>
<div class="baby">3</div>