jQuery: entfernen von Elementen nach dem aktuellen

Ich habe eine Frage über die Beseitigung aller Elemente nach dem aktuellen.

hier ist das Szenario:

Ich habe einen Speicherort Baum, dass mein Benutzer wälzen zu müssen, um zu einem bestimmten Wert. Ich habe ein AUSWÄHLEN, lädt der Speicherort der obersten Ebene per ajax. Die Daten präziseren Werten, um die Auswahl einzuschränken runter, damit ich einen neuen hinzufügen, WÄHLEN Sie je nachdem, was der Benutzer ausgewählt hat. Wenn der Benutzer bekommt bis zum Ende der verfügbaren Optionen für die Daten, höre ich auf hinzufügen Wählt und schnappen Sie sich den Wert des letzten, das ist, was ich bin nach.

Den Weg, den ich codiert dies ist für den Anfang eine AUSWÄHLEN, die die top-level-Standort-ID hard-wired, in, dann ein " onchange-event-handler, die geht an meine Datenbank und schnappt sich die Kinder für, die Auswahl, erstellt dann das neue auswählen, die innerhalb der aktuellen TD.

Dies geht weiter, bis keine Kinder zurückgegeben werden, die für die Letzte Wahl. An diesem Punkt kann ich die ID von dieser letzten Position.

Dies funktioniert gut, BIS der Benutzer entscheidet, etwas zu ändern, eine oder zwei wählt "upstream".

Hier ist eine illustration von dem, was ein Benutzer, der gekommen ist, nach unten den Speicherort Baum haben könnte (diese sind markiert im code):

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

wenn 'Kreis 1' war das Letzte Element in dieser Kette von Orten, die ich bekommen kann es mit $('#Standorte auswählen:last').val(). Wunderbar.

Was nicht so gut funktioniert, ist, wenn der Benutzer entscheidet, "Hmm, Nein, es ist nicht Cuyahoga ich bin nach, aber Stow", und verpasst dem Dritten wählen Sie die option. Was ich tun müssen, ist entfernen Sie alle wählt NACH dem wählen, die "Cuyahoga", da habe ich jetzt geh und hol keine weiteren Daten für "Verstauen". Jeder wählt nach der vor der Wahl keine Gültigkeit mehr haben.

Wählen Sie die, dass manipuliert wird geht selbst in das onchange-Ereignis, so dass ich das aktuelle element. Ich habe versucht $(elem).nach().remove(), aber das funktioniert nicht.

Irgendwelche Ideen auf, wie kann ich alle entfernen, Wählt nach dem aktuellen?

Dank!

Die Struktur der doc sieht wie folgt aus:

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