deleting last child issue if more than one child exists
<p><strong>SOLUTION</strong></p>

<pre><code>removeChild: function(select) {
    $(select).nextAll().remove();
}
</code></pre>

<hr>

<p>I am trying to dynamically create a chain of <code>&lt;select&gt;</code> boxes, here is an example function:</p>

<p><strong>JQUERY:</strong></p>

<pre><code>getLanguages: function() {
    $.ajax({
        url: './db_scripts/get_languages.php',
        success: function( data ) {
            $('&lt;select&gt;', {
                id: 'languages',
                html: createOptions( data,'Language' )
            }).appendTo('#sidebar');
        }
    });
},

selects.getLanguages();
$('#languages').live('change', function() {
    selects.removeChild($(this));
    selects.getCategories();    
});
</code></pre>

<p>My <strong>HTML</strong> is just: </p>

<pre><code>&lt;div id="sidebar"&gt;&lt;/div&gt;
</code></pre>

<p>Adding selects work perfectly. What I am trying to do is have another function that removes any children underneath the select that was changed. This way it removes all children <code>&lt;select&gt;</code> and the user can change the selection process anywhere in <code>&lt;select&gt;</code> tree. Here is an example of it working (try changing a top level option) <a href="http://philipimperato.com/mobileOrder" rel="nofollow">http://philipimperato.com/mobileOrder</a></p>

<p>here is my <code>removeChild()</code> function:</p>

<pre><code>removeChild: function(select) {
        alert('This is what is being passed in: ' + $(select).attr('id'));
        alert('This is the last child of the div, #sidebar: ' + $(select).parent('div').children('select:last-child').attr('id'));
        while($(select).parent('div').children('select:last-child') != $(select)) {
            alert('Same as first: ' + $(select).attr('id') + 'Same as 2nd: ' +$(select).parent('div').children('select:last-child').attr('id'));
            $(select).parent('div').remove($(select).parent('div').children('select:last-child'));
        }
    }
</code></pre>

<p>I have alerted stuff out for you convenience: Here is the website: <a href="http://InsanelyWeb.com" rel="nofollow">InsanelyWeb</a></p>

<p>The function is not working and giving me a jQuery error: "c.replace is not a function" - I have no idea how to fix that. Does anyone have any advice for me? Thanks!
<strong>EDIT</strong></p>

<hr>

<p>Here is the function working in plain javascript (which I just figure out)</p>

<pre><code>while(el.parentNode.lastChild != el) {
    el.parentNode.removeChild(el.parentNode.lastChild);
}
</code></pre>

<p>I am trying to convert that to jquery to do more stuff like <code>hide()</code> etc</p>

<pre><code>while($(el).parent('div').children('select:last-child') != el) {
            $($(el).parent('div').children('select:last-child')).remove();
        }
</code></pre>
