JQuery删除了错误的li

时间:2016-08-22 11:05:22

标签: jquery html css

我有以下标记:

<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();
     });
}); 

2 个答案:

答案 0 :(得分:3)

使用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对象。

答案 1 :(得分:0)

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