Rimuovere tutti gli elementi all'esterno di un contenitore?

Question

Sto cercando di trovare un modo per rimuovere tutti gli elementi (div) all'esterno di un contenitore specifico.

Ad esempio:

Ho un contenitore HTML con un paio di div all'interno di esso in questo modo:

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

Io fondamentalmente bisogno di rimuovere tutti gli elementi con il nome della classe baby che è al di fuori di container. Alcuni elementi non hanno nemmeno un contenitore, quindi non posso bersagliarli usando il genitore o qualcosa del genere.

È possibile?

Answer 1

È possibile utilizzare :not() o not() per evitare l'elemento all'interno #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>

---

Utilizzando 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

È inoltre possibile utilizzare il contenitore in cui si trovano tutti i bambini come ad esempio:

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