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