如何使用jQuery删除父元素

我在我的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(); 

工程，删除指定的列表项，但它不是“dynamic”。

有人可以给我一个小费？

Answer 1

只需使用.closest()方法： $(this).closest('.li').remove();
它从当前元素开始，然后爬上链寻找一个匹配的元素，并立即停止，find一个。

.parent()只访问元素的直接父元素，即与.li不匹配的.li div.msg-modification 。 所以它永远不会达到你正在寻找的元素。

除了.closest() （它检查当前元素，然后爬上链）之外的另一个解决scheme是使用.parents() – 但是，这将有一个警告，它不会停止，只要它发现一个匹配的元素它不检查当前元素，但只检查父元素）。 在你的情况下，它并不重要，但是对于你正在做的事情.closest()是最合适的方法。

---

另一件重要事情：

永远不要使用相同的ID多个元素。 这是不允许的，并导致非常难以debugging的问题。 从链接中删除id="191" ，如果需要访问点击处理程序中的ID，则使用$(this).closest('.li').attr('id') 。 实际上，如果你使用data-id="123" ，然后使用.data('id')而不是.attr('id')来访问它（因此你的元素ID不需要类似于任何ID （数据库？）行有）

Answer 2

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

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

Answer 3

那么使用unwrap（）

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

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

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

Answer 4

 $('#' + catId).parent().remove('.subcatBtns'); 

Answer 5

删除父项：

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

删除所有父母：

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