删除容器外的所有元素？

Question

我试图找到一种方法来删除特定容器外的所有元素（div的）。

例如：

我有几个div的HTML容器里面它像这样：

<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>

Answer 2

//$('.baby:not(#container .baby)').remove();//select class baby not inside container using selector :not 
 

 
$('.baby').not('#container .baby').remove();//select class baby not inside container using method .not()

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

 
<div id="someID"> 
 
<div class="baby">5</div> 
 
<div class="baby">6</div> 
 
<div class="baby">7</div> 
 
</div> 
 

 

 
<div class="baby">8</div> 
 
<div class="baby">9</div> 
 
<div class="baby">0</div>

Answer 3

您也可以使用，所有的孩子都位于容器如：

$('body').children().not('#container').remove();