jQuery：删除当前元素后的所有元素

Question

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

情境如下：

我有一个位置树，用户需要浏览才能找到特定值。我通过ajax加载顶级位置的SELECT。数据具有更精细的值以缩小选择范围，所以根据用户选择添加新的SELECT。当用户到达数据的可用选项末尾时，我停止添加SELECT并获取最后一个的值，这就是我想要的。

我编写代码的方式是从一个SELECT开始，该SELECT中硬编码了顶级位置ID，然后有一个“onchange”事件处理程序，该处理程序去数据库中获取该选择的子项，然后在当前TD中创建新的选择。

这样一直进行，直到最后一个选择没有返回子项。此时，我可以获取此最终位置的ID。

这很好用，直到用户决定更改上游的某些内容。

以下是用户得到位置树下方的示例（这些是代码中的SELECT）：

美国->俄亥俄州->卡约加县->克利夫兰->第1区

如果“第1区”是此位置链中的最后一个可用项目，则可以使用$('#locations select:last').val()获取它。非常好。

但是，如果用户决定：“嗯，不是卡约加我要的，而是斯托”，并更改了第三个选择选项，则效果不太好。我需要做的是删除'Cuyahoga'后的所有选择，因为我现在必须获取“Stow”的任何进一步数据。之前选择后的所有选择都不再有效。

正在操作的选择在onchange事件中传递自身，以便我拥有当前元素。我尝试过$(elem).after().remove()，但那样行不通。

您有什么关于如何删除当前选择后的所有SELECT的想法吗？

谢谢！

文档的结构大致如下：

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

- AaplMike

Answer 1

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

如果您需要指定选择器，可以使用相同的方法。

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

- SMathew

---

谢谢，我完全忘记了nextAll()。它非常好用。谢谢。 - AaplMike

Answer 2

要删除当前选择器后面的所有选择器，只需使用以下代码：

var curSelect = $('select').index('select');
$('select').gt(curSelect).remove();

将选择器传递给index()意味着它将查找文档中与该选择器匹配的所有元素，而不是提供该元素在其同级元素中的索引。 gt()查找由初始选择器返回的所有元素，其索引大于curSelect变量传递的索引，并在这种情况下将它们传递给remove()方法。

参考资料：

• gt()。
• index()。
• remove()。

- David Thomas