javascript - 3番目以降のすべての{要素}を削除するには?

Question

jQuery を使用して、特別な機会に削除する必要があるオブジェクトのリストがあります。意図と目的のために、次のように見えるとしましょう。

<div id="container">
    <div class="child one">stuff</div>
    <div class="child two">stuff</div>
    <div class="child three">stuff</div>
    <div class="child four">stuff</div>
    <div class="child five">stuff</div>
</div>

3番目の後に「すべて」を削除する簡単な方法はありますか（jQuery、必要に応じて純粋なJSを使用すると思います）.child？

注:.one, .two .threeは必ずしも番号順ではありません。

Answer 1

はい、:gtセレクターを使用して:

$("#container > .child:gt(2)").remove();

...これは、「の直接の子であり、インデックス 2 以上 (インデックスは 0 から始まる) にあるすべての.child要素を選択する」ことを意味します。#container

または、jQuery の拡張セレクターを使用したくない場合 (ブラウザー自体のセレクター エンジンに渡すことができないため)、.filter子をフィルター処理するために使用できます。

$("#container > .child").filter(function(index) {
    return index > 2;
}).remove();

それらが唯一の子である場合は、そのセレクター.childrenの一部の代わりに使用できます。> .child

$("#container").children().filter(function(index) {
    return index > 2;
}).remove();

Answer 2

:gt() セレクターと .remove() を使用する

$(document).ready(function(){
$('#container .child:gt(2)').remove();
});

デモビュー

Answer 3

$('.child').gt(2).remove();

ここで gt はより大きいことを意味します