点击删除父div

Question

我正在尝试删除点击链接上的div。问题是有相同的div和链接的多个结构，我尝试创建一个函数，但它删除所有div的

$(document).on("click", ".fd-bxx-cls", function(e) {
  e.preventdefault;
  $(this).parents('.fd-box2').fadeOut(300);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fd-box2">
  <div class="fd-box3">
    <a href="#" class="fd-bxx-cls"></a>
    <a class="fd-avtar-s" href="#"><img src="images/avatr_s.png" /></a>
    <div class="fd-nme-info">
      <span class="fd-mn-ttl">Robert Porter</span>
      <span class="fd-mncn-ttl">Pheonix, AZ</span>
    </div>
    <a href="#" class="ep-btns fd-msg-btn"></a>
  </div>
</div>

Answer 1

淡出祖父母应该有效。

$(this).parent().parent().fadeOut(300);

另一种可能性是使用.closest()。

$(this).closest(".fd-box2").fadeOut(300);

Answer 2

您应该使用closest()方法而不是parents()。请参阅文档中的差异。

此外，如果你想删除一个元素（而不仅仅是隐藏它），请使用remove()方法。