Question

I have a process that adds div containers based on responses to questions. The user has option to start over at any point. I would like to remove all containers after a certain point when the user does this. For example here is what you would see after 3 responses.

<div id="SolutionAdvisor">
    <div id="Col1"><div class="content">some content here</div></div>
    <div id="Col2"><div class="content">some content here</div></div>
    <div id="Col3"><div class="content">some content here</div></div> 
 </div>

If the user decides to go back to question 2 this what I would like to see:

  <div id="SolutionAdvisor">
    <div id="Col1"><div class="content">some content here</div></div>
    <div id="Col2"><div class="content">some content here</div></div> 
 </div>

I have tried using the :gt index like so:

     $('#SolutionAdvisor div:gt('+column+')').remove();

also tried:

     $('#SolutionAdvisor div:gt('+column+')').each(function(){$(this).remove();});

where column would be 1.

What I am seeing instead something like this:

 <div id="SolutionAdvisor">
    <div id="Col1"><div class="content">some content here</div></div>
    <div id="Col2"><div class="content">some content here</div></div>
    <div id="Col2"><div class="content">some content here</div></div> 
 </div>

What is proper way of doing this?

Answer 1

You can get the list of children from the parent div as an array of html elements. Then, wrap each one in a jQuery call and remove them as follows:

var maxQuestions = 2;

 children = $('#SolutionAdvisor').children();
 for (var i = maxQuestions; i < children.length; i++) {
     $(children[i]).remove();
 }

Fiddle: http://jsfiddle.net/stevenmtwhunt/YQusg/2/

There are some cool ways of doing this with jQuery selectors too, I just like the conceptual simplicity of the for loop.