Alle Elemente außerhalb eines Containers entfernen?

Question

Ich versuche einen Weg zu finden, alle Elemente (div's) außerhalb eines bestimmten Containers zu entfernen.

Zum Beispiel:

Ich habe ein HTML-Container mit ein paar divs in der es etwa so:

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

ich im Grunde alle Elemente mit dem Klassennamen baby entfernen müssen, die außerhalb ist von container. Einige der Elemente haben nicht einmal einen Container, so dass ich sie nicht mit dem Elternobjekt oder etwas Ähnlichem ansteuern kann.

Ist das überhaupt möglich?

Answer 1

können Sie verwenden :not() oder not() das Element innerhalb #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>

---

Mit not()

zu vermeiden

$('.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

Sie können auch den Behälter verwenden, wo alle Kinder befinden wie:

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