如何使用 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();

这可以工作，它会删除指定的列表项，但它不是“动态的”。

Can someone give me a tip?

201324 次浏览
小开
最佳答案

只需使用 .closest()方法: $(this).closest('.li').remove();
它从当前元素开始，然后沿着链向上查找匹配的元素，一旦找到匹配的元素就停止。

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

除了 .closest()(检查当前元素，然后沿着链向上爬)之外的另一个解决方案是使用 .parents()——然而，这需要注意的是，它不会在找到匹配的元素后立即停止(它不检查当前元素，而是检查 只有父元素)。在您的情况下，这并不重要，但是对于您正在尝试做的事情，.closest()是最合适的方法。

还有一件重要的事:

永远不要对多个元素使用相同的 ID。这是不允许的，而且会导致很难调试的问题。从链接中删除 id="191"，如果需要访问单击处理程序中的 ID，则使用 $(this).closest('.li').attr('id')。实际上，如果使用 data-id="123"，然后使用 .data('id')而不是 .attr('id')来访问它(所以您的元素 ID 不需要类似于任何 ID (数据库?)行)

小开

Use parents() instead of parent():

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

使用 拆开包装怎么样

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

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

<p class="child">
</p>
小开 
$('#' + catId).parent().remove('.subcatBtns');
小开

删除家长:

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

删除所有父母:

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

You could also use this:

$(this)[0].parentNode.remove();
小开

我偶然发现这个问题已经有一个小时了，一个小时后，我尝试了调试，这个方法很有帮助:

$('.list').on('click', 'span', (e) => {
$(e.target).parent().remove();
});

HTML:

<ul class="list">
<li class="task">some text<span>X</span></li>
<li class="task">some text<span>X</span></li>
<li class="task">some text<span>X</span></li>
<li class="task">some text<span>X</span></li>
<li class="task">some text<span>X</span></li>
</ul>

提交答案