图标点击隐藏它的父div

Question

<div class="cart-singel">
    <div class="div-1">
        <i class="fa fa-trash" aria-hidden="true"></i>
    </div>
    <div class="div-2">
    </div>
</div>

<div class="cart-singel">
    <div class="div-1">
        <i class="fa fa-trash" aria-hidden="true"></i>
    </div>
    <div class="div-2">
    </div>
</div>

点击i（fa-trash）时，需要隐藏它的父车-singel div。

Answer 1

您可以在jQuery中使用.parents()方法，就像这样

$('.fa-trash').click(function(){
    $(this).parents('.cart-singel').hide();
})

Answer 2

$("i.fa-trash").on("click",function(){
    $(this).closest("div.cart-singel").hide();
});

Answer 3

使用parents()方法查找父div＆amp; hide()隐藏该div

$(".cart-singel .div-1 i").click(function() {
$(this).parents(".cart-singel").hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cart-singel">
  <div class="div-1">
    <i class="fa fa-trash" aria-hidden="true">[Trash_Icon]</i>
  </div>
  <div class="div-2">
  </div>
</div>

<div class="cart-singel">
  <div class="div-1">
    <i class="fa fa-trash" aria-hidden="true">[Trash_Icon]</i>
  </div>
  <div class="div-2">
  </div>
</div>