如何在点击祖先后隐藏祖先元素和元素？

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();
})