jQuery: удалить элементы после текущего

у меня вопрос об удалении всех элементов после текущего.

сценарий:

у меня есть дерево местоположения, которое моим пользователям нужно пробраться, чтобы добраться до определенного значения. У меня есть выбор, который загружает местоположение верхнего уровня через ajax. Данные имеют более детализированные значения, чтобы сузить выбор, поэтому я добавляю новый выбор в зависимости от того, что выбрал пользователь. Когда пользователь добирается до конца доступных параметров для данных, я перестаю добавлять SELECTs и захватите ценность последнего, за которым я охочусь.

способ, которым я закодировал это, - начать с одного выбора, который имеет жесткий идентификатор местоположения верхнего уровня, а затем иметь обработчик событий "onchange", который выходит в мою базу данных и захватывает детей для этого выбора, а затем создает новый выбор в текущем TD.

это продолжается до тех пор, пока дети не возвращаются для последнего выбора. В этот момент я могу получить ID этого финала местоположение.

это прекрасно работает, пока пользователь не решит изменить что-то одно или два выбирает "вверх".

вот иллюстрация того, что может иметь пользователь, который спустился с дерева местоположений (это выбор в коде):

США - > Огайо - > Кайахога - > Кливленд - > район 1

если "район 1" был последним доступным элементом в этой цепочке местоположений, я могу получить его с помощью $("#locations select:last").вал.)( Wunderbar.

что не работает так хорошо, если пользователь решает: "хм, нет, это не Cuyahoga я после, но Стоу", и изменяет третий выберите опцию. То, что мне нужно сделать, это удалить все выбранные после выбора, который имеет "Cuyahoga", так как теперь я должен пойти за дополнительными данными для "Stow". Любой выбор после предыдущего выбора больше не действителен.

select, которым манипулируют, передает себя в событии onchange, так что у меня есть текущий элемент. Я пробовал $(elem).после.)(удалить(), но это не работает.

любые идеи о том, как я могу удалить все выбранные после текущего?

спасибо!

структура документа выглядит примерно так:

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