JQuery entfernen Eltern Liste Artikel

Question

Ich habe folgendes Markup:

<ul class="media-list"> 
    <li class="media post"> 
     <div class="media-left"> 
      <a href="#"></a> 
     </div> 
     <div class="media-body"> 
      <div class="post-content"> 
       <p></p> 
      </div> 
      <div class="post-actions clearfix"> 
      <ul class="list-unstyled list-inline"> 
       <li> 
        <a class="js-delete-post" data-post-id="24" href="#"> 
        Delete 
        </a> 
       </li> 
      </ul> 
     </div> 
     </div> 
    </li> 
    <li class="media post"> 
     ... 
    </li> 
</ul> 

Wenn ich js-löschen-post Anker ich auf die Mutter li mit Klasse „Medien-Post“ entfernen möchten.

Die folgende Jquery durchläuft einfach eine Ebene nach oben und entfernt die li der js-delete-Klasse. Wie durchquere ich eine zusätzliche Ebene, um den Beitrag zu entfernen.

$(".js-delete-post").click(function (e) { 
    var a = $(this); // "this" is the <a> 

    a.parents("li").fadeOut(function() { 
       $(this).remove(); 
    }); 
}); 

Answer 1

Sie wollen closest statt parents und es dann auch von den Klassen wählen.

a.closest("li.media.post").fadeOut(function() { 
    $(this).remove(); 
}); 

Answer 2

In Ihrem Fall können Sie auch weiterhin Eltern verwenden, aber Sie müssen die Klassen des Elements hinzuzufügen, die Sie suchen: $ (this) .parents („li.media.post“)

Ohne die Klassen geben Eltern zwei Elemente zurück.

Dies ist möglich, weil nur ein Vorfahrelement mit diesen Merkmalen vorhanden ist.

In jedem Fall empfehle ich die nächste Methode:

$(function() { 
 
    $(".js-delete-post").on('click', function (e) { 
 
    e.preventDefault(); 
 

 
    $(this).parents("li.media.post").fadeOut(function() { 
 
     $(this).remove(); 
 
    }); 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> 
 

 
<ul class="media-list"> 
 
    <li class="media post"> 
 
    <div class="media-left"> 
 
     <a href="#"></a> 
 
    </div> 
 
    <div class="media-body"> 
 
     <div class="post-content"> 
 
     <p></p> 
 
     </div> 
 
     <div class="post-actions clearfix"> 
 
     <ul class="list-unstyled list-inline"> 
 
      <li> 
 
      <a class="js-delete-post" data-post-id="24" href="#"> 
 
       Delete 
 
      </a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </li> 
 
    <li class="media post"> 
 
    ... 
 
    </li> 
 
</ul>