Question

i am trying to remove a div on click on a link . the problem is there are multiple structure of same div and link and i tried making a function but it removes all div’s

$(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

Fading out the grandparent should work.

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

Another possibility is using .closest().

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