Javascript 如何使用jQuery删除父元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6647736/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to delete parent element using jQuery
提问by Noob
I have some list item tags in my jsp. Each list item has some elements inside, including a link ("a" tag) called delete. All that I want is to delete the entire list item when I click the link.
我的jsp中有一些列表项标签。每个列表项内部都有一些元素，包括一个称为删除的链接（“a”标签）。我想要的只是在单击链接时删除整个列表项。
Here is the structure of my code:
这是我的代码结构：
$("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>But this doesn't work. I'm new at jQuery, so I tried some things, like for example:
但这不起作用。我是 jQuery 的新手，所以我尝试了一些东西，例如：
$(this).remove();
This works, it deletes the link when clicked.
这有效，它会在单击时删除链接。
$("#221").remove();
This works, it deletes the indicated list item, but it's not "dynamic".
这有效，它删除了指示的列表项，但它不是“动态的”。
Can someone give me a tip?
有人可以给我一个提示吗？
回答by ThiefMaster
Simply use the .closest()method: $(this).closest('.li').remove();
It starts with the current element and then climbs up the chain looking for a matching element and stops as soon as it found one.
只需使用以下.closest()方法：$(this).closest('.li').remove();
它从当前元素开始，然后沿着链向上寻找匹配的元素，一旦找到就停止。
.parent()only accesses the directparent of the element, i.e. div.msg-modificationwhich does not match .li. So it never reaches the element you are looking for.
.parent()只访问元素的直接父元素，即div.msg-modification它不匹配.li。所以它永远不会到达你正在寻找的元素。
Another solution besides .closest()(which checks the current element and then climbs up the chain) would be using .parents()- however, this would have the caveat that it does not stop as soon as it finds a matching element (and it doesn't check the current element but onlyparent elements). In your case it doesn't really matter but for what you are trying to do .closest()is the most appropriate method.
除了.closest()（检查当前元素然后爬上链）之外的另一个解决方案将使用.parents()- 但是，这将有一个警告，即它不会在找到匹配元素后立即停止（并且它不检查当前元素但只有父元素）。在您的情况下，这并不重要，但对于您尝试做的事情.closest()来说，这是最合适的方法。
Another important thing:
另一个重要的事情：
NEVERuse the same ID for more than one element. It's not allowed and causes very hard-to-debug problems. Remove the id="191"from the link and, if you need to access the ID in the click handler, use $(this).closest('.li').attr('id'). Actually it would be even cleaner if you used data-id="123"and then .data('id')instead of .attr('id')to access it (so your element ID does not need to resemble whatever ID the (database?) row has)
切勿对多个元素使用相同的 ID。这是不允许的，会导致非常难以调试的问题。id="191"从链接中删除，如果您需要访问点击处理程序中的 ID，请使用$(this).closest('.li').attr('id')。实际上，如果您使用data-id="123"然后.data('id')而不是.attr('id')访问它会更干净（因此您的元素 ID 不需要类似于（数据库？）行具有的任何 ID）
回答by dav
回答by josemota
Use parents()instead of parent():
使用parents()代替parent()：
$("a").click(function(event) {
event.preventDefault();
$(this).parents('.li').remove();
});
回答by Andrea_dev
Delete parent:
删除父项：
$(document).on("click", ".remove", function() {
$(this).parent().remove();
});
Delete all parents:
删除所有父项：
$(document).on("click", ".remove", function() {
$(this).parents().remove();
});
回答by Andres Paul
You could also use this:
你也可以使用这个：
$(this)[0].parentNode.remove();
回答by Itisha-systematix
$('#' + catId).parent().remove('.subcatBtns');
