I'm trying to find a way to remove all the elements (div's) outside of a specific container.

For example:

I have an HTML container with a few div's inside of it like 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>

I basically need to remove all the elements with the class name baby that is outside of container. Some of the elements don't even have a container so I cannot target them using the parent or anything like that.

Is this possible at all?

I'm trying to find a way to remove all the elements (div's) outside of a specific container.

For example:

I have an HTML container with a few div's inside of it like 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>

I basically need to remove all the elements with the class name baby that is outside of container. Some of the elements don't even have a container so I cannot target them using the parent or anything like that.

Is this possible at all?

• javascript
• jquery

• 1 We (all humans) are outside of that container. Take care of us! Don't remove us! – mehrandvd Commented Apr 23, 2016 at 7:21

3 Answers 3

You can use :not() or not() to avoid the element inside #container

$('.baby:not(#container .baby)').remove();

<script src="https://ajax.googleapis./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>

Using not()

$('.baby').not('#container .baby').remove();

<script src="https://ajax.googleapis./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>

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

You can also use the container where all the children are located such as:

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