jQuery:删除当前的元素

Question

我有一个关于删除当前元素之后的所有元素的问题.

这是场景:

我有一个位置树,我的用户需要通过它来获取特定值.我有一个SELECT通过ajax加载顶级位置.数据具有更精细的值以缩小选择范围,因此我根据用户选择的内容添加新的SELECT.当用户到达数据的可用选项的末尾时,我停止添加SELECT并获取最后一个的值,这就是我所追求的.

我对此进行编码的方式是从一个具有硬连接的顶级位置ID的SELECT开始,然后有一个'onchange'事件处理程序,该处理程序将转到我的数据库并抓取子项以进行该选择,然后创建新的在当前的TD内选择.

这种情况一直持续到最后选择没有孩子归还.那时,我可以获得这个最终位置的ID.

这非常有效,直到用户决定改变一个或两个选择"上游"的东西.

下面是一个用户已经找到了位置树的内容(这些是代码中的SELECT):

美国 - >俄亥俄州 - >凯霍加 - >克利夫兰 - > 1区

如果'第1区'是这个位置链中的最后一个可用项目,我可以使用$('#locations select:last').val()获得它.Wunderbar酒吧.

什么不能很好地工作是如果用户决定,"嗯,不,它不是Cuyahoga我追求,但Stow",并改变第三选择选项.我需要做的是在选择"Cuyahoga"之后删除所有选择,因为我现在必须为"Stow"获取任何进一步的数据.先前选择后的任何选择都不再有效.

正在操作的选择在onchange事件中传递给自己,因此我有当前元素.我尝试过$(elem).after().remove(),但这不起作用.

关于如何在当前的SELECT之后删除所有SELECT的任何想法？

谢谢!

doc的结构看起来像这样:

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

[剪断]

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();

如果需要指定选择器,可以使用相同的方法执行此操作.

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