クリックして祖先の後の祖先の要素と要素を隠すにはどうすればよいですか？

Question

クリックするとspan.btnになります。li.item祖先と次のli.itemを非表示にしたいと思います。どのように私は以下のHTMLのためにそれを行うのですか？

<ul id="list"> 
    <li class="item"><div><span class="btn">remove</span></div></li> 
    <li class="item">text</li> 
    <li class="item">text</li> 
    <li class="item"><div><span class="btn">remove</span></div></li> 
    <li class="item">text</li> 
    <li class="item">text</li> 
</ul> 

Answer 1

これを試してみてください：

$(document).on('click', '.btn', function(){ 

    var $this = $(this); 
    var $parentLi = $this.parents('li'); 
    var $nextLi = $parentLi.next('li'); 

    $parentLi.hide(); 
    $nextLi.hide(); 
})