JQUERY：この最も近いクラス名fadeOutは複数の要素をフェードしています

Question

以下はPHPループの出力htmlです。

<div class="item clearfix" style="cursor: default;"> 
    <div class="image"> 
     <a href="/social/user.php?user=user1"> 
      <img src="https://www.gravatar.com/avatar/b0edee6b101a7aaa324ffd0dfb2f00dc?d=retro&amp;s=32" width="32"> 
     </a> 
    </div> 

    <div class="info"> 
     <a href="/social/user.php?user=user1" class="name"> 
      User1 
     </a> 
     <span style="left:40%">Friend Request</span> 
     <span style="left:80%"> 
      <a href="#" class="accept_friend" title="accept_friend"> 
       <i class="fa fa-check-circle" aria-hidden="true" style="font-size: xx-large; color: green;"></i> 
      </a> 
     </span> 

     <span style="left:88%"> 
      <a href="#" class="deny_friend" title="deny_friend"> 
       <i class="fa fa-times-circle" aria-hidden="true" style="font-size: xx-large; color: #CB2C1A;"></i> 
      </a> 
     </span> 
    </div> 
</div> 

<div class="item clearfix" style="cursor: default;"> 
    <div class="image"> 
     <a href="/social/user.php?user=user2"> 
      <img src="https://www.gravatar.com/avatar/b0edee6b101a7aaa324ffd0dfb2f00dc?d=retro&amp;s=32" width="32"> 
     </a> 
    </div> 

    <div class="info"> 
     <a href="/social/user.php?user=user2" class="name"> 
      User2 
     </a> 
     <span style="left:40%">Friend Request</span> 
     <span style="left:80%"> 
      <a href="#" class="accept_friend" title="accept_friend"> 
       <i class="fa fa-check-circle" aria-hidden="true" style="font-size: xx-large; color: green;"></i> 
      </a> 
     </span> 

     <span style="left:88%"> 
      <a href="#" class="deny_friend" title="deny_friend"> 
       <i class="fa fa-times-circle" aria-hidden="true" style="font-size: xx-large; color: #CB2C1A;"></i> 
      </a> 
     </span> 
    </div> 
</div>  

この次のビットは、私のjqueryスクリプトです。何らかの理由

$(document).on("click", "a.accept_friend", function() { 
    var removeit = $(this).closest(':has(.item)').find('.item').fadeOut(); 
    return removeit; 
}); 

クラス=「accept_friend」がクリックされたいずれかの場合、両方のクラス=「項目」さんが削除されているだけではなく.closest（ '：'（.item）を有している）をクリックしますイベント。

最終的には、class = "accept_friend"をクリックすると、クリックされた要素のコンテナclass = "item"のみが削除されます。

Answer 1

bodyタグにbodyタグがあり、bodyアイテムにクラスitemの子要素がある要素を見つけます。.itemのすべての要素を選択します。現在のケースでは2である。

あなたはitem要素に横断し、それをフェードアウトする必要があります。

$(document).on("click", "a.accept_friend", function() { 
    var removeit = $(this).closest('.item').fadeOut(); 
    return removeit; 
});