kann nicht dynamisch hinzugefügt Element

Question

<div class='crumb'>home</div> 
<div class='crumb'>sky</div> 
<div class='crumb'>sea</div> 

sky und sea werden dynamisch appendTo Funktion jQuery verwenden hinzugefügt entfernen.

Jetzt möchte ich alle crumbs größer als dann einen geklickt haben.
Zum Beispiel: sky ist angeklickt, ich erwarte, dass sea entfernt wird.

$(document).on('click', '.crumb', function() { 
    var i = $(this).index(".crumb"); 
    $(".crumb:gt(i)").remove(); 
}); 

Nichts ist entfernt!

Answer 1

$(this).nextAll().remove(); 

Holen Sie sich alle Elemente, nachdem sie und entfernen Sie sie

Answer 2

$(document).on('click', '.crumb', function() { 
 
    var i = $(this).index(".crumb"); 
 
    $(".crumb:gt("+i+")").remove(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='crumb'>home</div> 
 
<div class='crumb'>sky</div> 
 
<div class='crumb'>sea</div>

Answer 3

Versuchen Sie diesen Code

$(document).on('click', '.crumb', function() { 
 
    $(this).nextAll().remove(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='crumb'>home</div> 
 
<div class='crumb'>sky</div> 
 
<div class='crumb'>sea</div>