Remove dynamically loaded content with jQuery

Question

I want to remove some div elements that are added with a wordpress loop via a get_template_part();.

The structure is something like this:

<div id="level1" class="col-0-1 noPad">
    get_template_part('new-story');   
</div>

I've cut out most of the loop for readability.

The template part is structured like this:

<div class="col-OuterContainer noPad">
  stuff
</div>

So in practice it looks more like this:

 <div id="level1" class="col-0-1 noPad">
    <div class="col-OuterContainer noPad">
      stuff
    </div>  
</div>

I want to detect whether there's more than 2 divz named "col-OuterContainer", then remove the divz there after. I thought it was pretty straight forward and tried this:

var num = $('.col-OuterContainer').length;
if (num > 2) {
   $('#level1>div:gt(1)').remove();
}

I currently have 3 posts at the moment so the third should have been removed, but it hasn't. I'm getting a console.log of 3 so it obviously know there are 3 elements there so why is it not removing the third element?

Update: So I've played around some more with the code.

The wp loop is still the same:

 <div id="level1" class="col-0-1 noPad">
        get_template_part('new-story');   
    </div>

The code inside get_template_part is this:

<div class="col-OuterContainer noPad"><div>stuff 1</div></div>

The JS is this:

jQuery(document).ready(function($){ 
console.log( $('.col-OuterContainer').length );
$('#level1 .noPad:gt(1)').remove();     
});

I'm getting this output:

<div id="level1" class="col-0-1 noPad">
<div class="col-OuterContainer noPad"><div>stuff 1</div></div>
<div class="col-OuterContainer noPad"><div>stuff 1</div></div>
<div class="col-OuterContainer noPad"><div>stuff 1</div></div>
</div>

Console shows 3 elements but won't remove the third element even if I target noPad or .col-OuterContainer.

Answer 1

Adjusted Selector

Modify the jQuery selector to:

<script>
    $('#level1 .noPad:gt(1)').remove();
       //Or 
    $(document).find('#level1 .noPad:qt(1)').remove();
</script>

Fiddle : http://jsfiddle.net/K5Q3B/6/

Adjusted this after your previous selector was failing when more <div> s were introduced (See example Fiddle ). Alternatively, you could try what this person suggested in another SO Question :

<script>
   $('#level1 .noPad').slice(3).remove();
</script>

---

Removing Dynamically loaded <div> 's

<script>
    $.ajax({
       .. //Other Opts
       success: function( data ) {
          $('#somediv').html( data );
          var NodesToRemove = $(document).find('#level1 > div:gt(1)'); 
          //Or $('#somediv').find('#level1 .noPad:qt(1)').remove(); 
          NodesToRemove.remove();
       });
    });
</script>

---

Prevention in PHP:

As others in the comments mentioned, it would be much better to prevent this in PHP - then you wouldn't need to consider any JavaScript for removing any of the <div> s at all,

$Counter = 0;
if ( have_posts() ) {
    while ( have_posts() ) {
       $Counter++;
       the_post(); 
       if ( $Counter <= 2 )
           get_template_part('new-story'); 
    } 
} 

Furthermore you could rewrite the PHP to have an AJAX Condition,

$Counter = 0;
$isAjax = ( isset( $_GET["ajax"] ) && $_GET["ajax"] == 'true' ? true : false );
if ( have_posts() ) {
    while ( have_posts() ) {
       $Counter++;
       the_post(); 
       if ( !$isAjax || ( $isAjax && $Counter <= 2 ))
           get_template_part('new-story'); 
    } 
} 

Answer 2

var num = $('.col-OuterContainer').length;

This will give you the number of div s with class col-OuterContainer in the whole document.

$('#level1>div:gt(1)') { ...

This selector only counts div which are direct children of the #level1 node.

Do you have .col-OuterContainer in other places on your page, or nested deeper inside your #level1 node ?