删除容器外的所有元素？

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>

我基本上需要删除所有类名baby以外的元素container.有些元素甚至没有容器,所以我不能使用父类或类似的东西来定位它们.

这有可能吗？

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>