JQuery 删除错误的 li

Question

我有以下标记:

<ul class="media-list">
  <li class="media post">
     <div class="media-body">
        <div class="post-content">
           <p>test</p>
        </div>
        <div class="post-files clearfix">
           <p>Attached Files</p>
           <ul class="list-inline">
             <li>
                <a class="js-delete-file" data-file-id="13" title="Delete" href="#">
                   <i class="fa fa-times" aria-hidden="true"></i>
                </a>
              </li>
           </ul>
        </div>
     </div>
   </li>
</ul>

当我单击 js-delete-file anchor 时，我想删除此链接所在的即时 li。

下面的 Jquery 正在删除类为“media-post”的 li。如何删除链接所在的 li？

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

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

Answer 1

使用closest()到:

get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

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

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

---

同时 .parents()用于:

Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.

---

你也可以使用 parent() 在这种特殊情况下也是单数。

Given a jQuery object that represents a set of DOM elements, the parent() method traverses to the immediate parent of each of these elements in the DOM tree and constructs a new jQuery object from the matching elements.