jQuery：現在の要素の後の要素を削除します。

Question

現在の要素の後にあるすべての要素を削除することについて質問があります。私は、ユーザーが特定の値を取得して苦労する必要がある場所のツリーを持って

：

はここにシナリオです。私はajax経由でトップレベルの場所を読み込むSELECTを持っています。データの選択範囲を狭めるために、より細かい値があるので、ユーザーが選択した内容に応じて新しいSELECTを追加します。ユーザーがデータの利用可能なオプションの終わりに達すると、SELECTの追加をやめ、最後のものの値を取得します。

これをコード化する方法は、最上位レベルのロケーションIDがハードワイヤードされているSELECTから始まり、データベースに出力された「onchange」イベントハンドラを持ち、現在のTD内に新しい選択を作成します。

最後の選択のために子が返されなくなるまで続きます。その時点で、私はこの最終的な場所のIDを得ることができます。

これは素晴らしいことです。ユーザーが1つまたは2つの項目を「上流」に変更することを決定するまでうまくいきます。 >オハイオ州 - - >カイヤホ - >クリーブランド - >地区1

USA：ここ

は、ロケーションツリーの下たどっているユーザーが持っているかもしれないもののイラスト（これらはコード内のSELECTている）です'District 1'がこの一連の場所で最後に利用可能だったアイテムであれば、$（ '＃locations select：last'）。val（）を使用して取得できます。 Wunderbar。

何がうまくいかないのは、ユーザーが「うん、いいえ、私は後になっているがストウ」ではないと判断した場合です。第3ののオプションを選択します。私が今必要とするのは、「カウハホガ」を持っている選択の後にすべての選択を取り除くことです。前の選択の後の選択はもはや有効ではありません。

操作されているselectが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> 

[省略]

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

単に使用し、現在選択した後に発生するものを選択を削除する：index()にセレクタを渡す

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

それはむしろ、そのセレクタに一致する、文書内のすべての要素を検索することを意味その兄弟要素の中から要素のインデックスを提供するよりも。

gt()は、curSelect変数で渡されたインデックスよりも大きいインデックスで初期セレクタによって返されたすべての要素を検出し、この場合はremove()メソッドに渡します。

参考文献：

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