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

Question

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

这里的情景：

我有我的用户需要通过涉水去一个特定的值的位置树。我有一个SELECT通过ajax加载顶层位置。数据有更多的粒度值，以缩小选择范围，所以我添加了一个新的SELECT，具体取决于用户选择的内容。当用户到达数据可用选项的末尾时，我停止添加SELECT并获取最后一个的值，这正是我所追求的。

我编码的方式是从一个顶层位置ID硬连接的SELECT开始，然后有一个'onchange'事件处理程序，它发送到我的数据库并抓取该子选项，然后在当前TD中创建新的选择。

继续直到没有孩子返回最后的选择。那时，我可以得到这个最终位置的ID。

这很好，直到用户决定改变一个或两个选择“上游”。

这里是什么已经下来了位置树用户可能有一个说明（这是在代码中选择）：

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

如果'地区1'是这个地区连锁店中最后一个可用商品，我可以使用$（'＃locations select：last'）。val（）来获得它。 Wunderbar酒吧。

如果用户决定“嗯，不，这不是我以后的Cuyahoga，但是Stow”，并且改变了第三个选择选项。我需要做的是在选择'Cuyahoga'之后删除所有选择，因为我现在必须为“Stow”获取更多数据。先前选择后的任何选择不再有效。

正在操作的select将自身传递给onchange事件，以便拥有当前元素。我尝试过$（elem）.after（）。remove（），但这不起作用。

任何关于如何在当前之后删除所有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(); 

Answer 2

要除去那些之后的当前选择中发生的选择，只需使用：

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

传递一个选择器index()意味着它会发现所有的文档中的选择器匹配的元素，而而不是从其兄弟元素中提供元素的索引。

gt()找到初始选择器返回的所有元素，其索引大于curSelect变量传入的索引，在这种情况下，将它们传递给remove()方法。

参考文献：

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