jQuery: remove elements after current one

Question

I have a question about removing all elements after the current one.

here's the scenario:

I have a location tree that my users need to wade through to get to a specific value. I have a SELECT that loads the top-level location via ajax. The data has more granular values in order to narrow the selection down, so I add a new SELECT depending on what the user chose. When the user gets to the end of available options for the data, I stop adding SELECTs and grab the value of the last one, which is what I'm after.

The way I coded this is to start with one SELECT which has the top-level location ID hard-wired in, then have an 'onchange' event handler which goes out to my database and grabs the children for that selection, then creates the new select within the current TD.

This goes on until no children are returned for the last choice. At that point, I can get the ID of this final location.

This works great UNTIL the user decides to change something one or two selects "upstream".

Here's an illustration of what a user that has gotten down the location tree might have (these are SELECTs in code):

USA -> Ohio -> Cuyahoga -> Cleveland -> District 1

if 'District 1' was the last available item in this chain of locations, I can get it using $('#locations select:last').val(). Wunderbar.

What doesn't work so well is if the user decides, "Hmm, no it's not Cuyahoga I'm after, but Stow", and changes the third select option. What I need to do is remove all selects AFTER the select that has 'Cuyahoga', since I now have to go fetch any further data for "Stow". Any selects after the prior choice are no longer valid.

The select that is being manipulated passes itself in the onchange event, so that I have the current element. I've tried $(elem).after().remove(), but that doesn't work.

Any ideas on how I can remove all SELECTs after the current one?

Thanks!

The structure of the doc looks something like this:

<table border id="loctable">
  <tr><th>Location:</th><td><select id="loc0" onchange="return UpdateLocationSelect(this);">
    <option>choose..</option>
    <option value="3">USA</option>
    </select>
  </td>
  </tr>

[snip]

function UpdateLocationSelect(elem) {
    // load sub locations for PPID given. IN this case, locations under USA. add options to elem
    // Also, erase any selects after this one, in case the user has "backed up" his selection

    $(elem).next().remove();  // Help needed here!! how to remove any SELECTs after this one??

    $.ajax({
        url: "api.php",
        dataType: "json",
        data: { cmd: "sublocs", "pid": elem.value },
        async: false,
        success: function( data, textStatus ) {
            // results
            if( $(data).length ) {
                $('#loctable td').append( "<select onchange='return UpdateLocationSelect(this);'><option>choose..</option></select>");
                $.each( data, function( key, val ){
                    $('#loctable select:last').append( '<option value="'+key+'">'+val+'</option>' );
                });
            }
            else
            {
                // we've hit the end of this location branch. Alert to check val is right
                alert( "LocID: " + $('#loctable select:last').val() );
            }
        },
      });
      return false;
    }

Answer 1

$(elem).nextAll().remove();

If you need to specify a selector, you can do that using the same method.

$(elem).nextAll('select.some-class').remove();