Remove all containers after certain location in jquery
<p>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.  </p>

<pre><code>&lt;div id="SolutionAdvisor"&gt;
    &lt;div id="Col1"&gt;&lt;div class="content"&gt;some content here&lt;/div&gt;&lt;/div&gt;
    &lt;div id="Col2"&gt;&lt;div class="content"&gt;some content here&lt;/div&gt;&lt;/div&gt;
    &lt;div id="Col3"&gt;&lt;div class="content"&gt;some content here&lt;/div&gt;&lt;/div&gt; 
 &lt;/div&gt;
</code></pre>

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

<pre><code>  &lt;div id="SolutionAdvisor"&gt;
    &lt;div id="Col1"&gt;&lt;div class="content"&gt;some content here&lt;/div&gt;&lt;/div&gt;
    &lt;div id="Col2"&gt;&lt;div class="content"&gt;some content here&lt;/div&gt;&lt;/div&gt; 
 &lt;/div&gt;
</code></pre>

<p>I have tried using the :gt index like so:</p>

<pre><code>     $('#SolutionAdvisor div:gt('+column+')').remove();
</code></pre>

<p>also tried:</p>

<pre><code>     $('#SolutionAdvisor div:gt('+column+')').each(function(){$(this).remove();});
</code></pre>

<p>where column would be 1.</p>

<p>What I am seeing instead something like this:</p>

<pre><code> &lt;div id="SolutionAdvisor"&gt;
    &lt;div id="Col1"&gt;&lt;div class="content"&gt;some content here&lt;/div&gt;&lt;/div&gt;
    &lt;div id="Col2"&gt;&lt;div class="content"&gt;some content here&lt;/div&gt;&lt;/div&gt;
    &lt;div id="Col2"&gt;&lt;div class="content"&gt;some content here&lt;/div&gt;&lt;/div&gt; 
 &lt;/div&gt;
</code></pre>

<p>What is proper way of doing this?</p>
