刪除容器外的所有元素？

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();