Удалить все элементы за пределами контейнера?

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>

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