如何使用jQuery删除父元素

Question

我的jsp中有一些列表项标签.每个列表项都包含一些元素,包括一个名为delete的链接("a"标签).我想要的只是在点击链接时删除整个列表项.

这是我的代码的结构:

$("a").click(function(event) {
  event.preventDefault();
  $(this).parent('.li').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="191" class="li">
  <div class="text">Some text</div>
  <h4><a href="URL">Text</a></h4>
  <div class="details">
    <img src="URL_image.jpg">
    <span class="author">Some info</span>
    <div class="info"> Text
      <div class="msg-modification" display="inline" align="right">
        <a name="delete" id="191" href="#">Delete</a>
      </div>
    </div>
  </div>
</li>

但这不起作用.我是jQuery的新手,所以我尝试了一些东西,例如:

$(this).remove();

这有效,它会在单击时删除链接.

$("#221").remove();

这有效,它删除指示的列表项,但它不是"动态的".

有人可以给我一个提示吗？

Answer 1

只需使用.closest()方法:$(this).closest('.li').remove();
它从当前元素开始,然后爬上链寻找匹配元素,并在找到匹配元素后立即停止.

.parent()只访问元素的直接父元素,即div.msg-modification不匹配的元素.li.所以它永远不会到达你想要的元素.

另外一个解决方案.closest()(检查当前元素,然后爬上链)将使用.parents()- 但是,这将有一个警告,它一旦找到匹配元素就不会停止(并且它不会检查当前元素但只有父元素).在你的情况下,它并不重要,但你想要做的.closest()是最合适的方法.

另一件重要事情:

切勿对多个元素使用相同的ID.这是不允许的,并导致非常难以调试的问题.id="191"从链接中删除,如果需要在单击处理程序中访问ID,请使用$(this).closest('.li').attr('id').实际上如果你使用data-id="123"然后.data('id')而不是.attr('id')访问它会更干净(所以你的元素ID不需要像(数据库？)行那样的任何ID)

Answer 2

怎么样使用unwrap()

<div class="parent">
<p class="child">
</p>
</div>

使用后 - $(".child").unwrap()- 它会;

<p class="child">
</p>

Answer 3

使用parents()而不是parent():

$("a").click(function(event) {
  event.preventDefault();
  $(this).parents('.li').remove();
});

Answer 4

删除父级:

$(document).on("click", ".remove", function() {
       $(this).parent().remove(); 
});

删除所有父母:

$(document).on("click", ".remove", function() { 
       $(this).parents().remove();
});