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正在删除类＆＃34; media-post＆＃34;代替。如何删除链接所在的内容？

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

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

Answer 1

使用closest()：

通过测试元素本身并遍历DOM树中的祖先来获取与选择器匹配的第一个元素。

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

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

虽然.parents()用于：

获取当前匹配元素集中每个元素的祖先 s ，可选择由选择器进行过滤。

您也可以在此特定情况下使用parent() 单数。

给定一个表示一组DOM元素的jQuery对象，parent（）方法遍历DOM树中每个元素的直接父元素，并从匹配元素构造一个新的jQuery对象。

Answer 2

$(".js-delete-file").click(function (e) {
    var a = $(this).parent('li'); // "this" is the <a>

     a.fadeOut(function () {
            $(this).remove();
     });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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">Delete</i>
                </a>
              </li>
           </ul>
        </div>
     </div>
   </li>
</ul>

JQuery删除了错误的li

2 个答案: