Question

SOLUTION

removeChild: function(select) {
    $(select).nextAll().remove();
}

---

I am trying to dynamically create a chain of <select> boxes, here is an example function:

JQUERY:

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

selects.getLanguages();
$('#languages').live('change', function() {
    selects.removeChild($(this));
    selects.getCategories();    
});

My HTML is just:

<div id="sidebar"></div>

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 <select> and the user can change the selection process anywhere in <select> tree. Here is an example of it working (try changing a top level option) http://philipimperato.com/mobileOrder

here is my removeChild() function:

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'));
        }
    }

I have alerted stuff out for you convenience: Here is the website: InsanelyWeb

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!
EDIT

---

Here is the function working in plain javascript (which I just figure out)

while(el.parentNode.lastChild != el) {
    el.parentNode.removeChild(el.parentNode.lastChild);
}

I am trying to convert that to jquery to do more stuff like hide() etc

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

Answer 1

I am not quite sure what you are trying to do in removeChild, but looking at your code, I think you misunderstood the way .remove() works in jQuery. It removed the elements selected (as in by the selector). So, if you want to remove the select element in removeChild, you can simply do:

$(select).remove();

Another method that also removes elements from the DOM is .empty(), which removes all children of the selected elements. So, if you want to remove all children of the #sidebar, you could do:

$('#sidebar').empty();

EDIT:

Okay, here’s my 2nd try 🙂

removeChild: function(select) {
    $(select).nextAll().remove();
}

Take a look at .nextAll(). It may be what you are after.