图标单击隐藏它的父 div答案

【问题标题】：Icon click hide it's parent div图标单击隐藏它的父 div
【发布时间】：2018-02-05 23:41:04
【问题描述】：

<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) 时，需要隐藏它的父 cart-singel div。

【问题讨论】：

你忽略了分享你试过但不起作用的 jQuery
是的，我尝试了一些 jQuery，但它不起作用。我忘了写那些。但现在得到了答案。

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

使用parents() 方法查找父div & 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>

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：