如何使用jQuery删除父元素

IT技术 javascript jquery parent
2021-02-24 11:36:45

我的jsp中有一些列表项标签。每个列表项内部都有一些元素，包括一个称为删除的链接（“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();

这有效，它删除了指示的列表项，但它不是“动态的”。

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

6个回答

只需使用以下.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）

@thief 我们如何使用最近的（）删除动态添加的内容？
2021-04-20 11:36:45
@Thifmaster: .parents("li:first") 应该在第一个匹配的元素处停止
2021-04-26 11:36:45
非常好的解决方案和非常有用的评论！非常感谢：D（我将删除链接中的 id，我不需要它。谢谢！）
2021-05-04 11:36:45
@ThifMaster：不幸的是，有时你不得不滥用某些东西;-)
2021-05-05 11:36:45
@记者：没错。但这不是一个特性，.parents()而仅仅是由于选择器。在他的情况下，.parents('.li')如果.li父母没有其他人在场，他甚至可能会工作。
2021-05-06 11:36:45

使用unwrap()怎么样

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

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

<p class="child">
</p>
这应该是答案，然后它会删除孩子。
2021-04-23 11:36:45
简单实用。受到推崇的。
2021-05-12 11:36:45

使用parents()代替parent()：

$("a").click(function(event) {
  event.preventDefault();
  $(this).parents('.li').remove();
});
这将删除所有带有 li 的父母
2021-04-18 11:36:45

删除父项：

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

删除所有父项：

$(document).on("click", ".remove", function() { 
       $(this).parents().remove();
});
当您创建了一些实时元素时，这非常有效。伟大的
2021-04-24 11:36:45

你也可以使用这个：

$(this)[0].parentNode.remove();
其它你可能感兴趣的问题
上一篇如何将 JavaScript 日期对象转换为刻度 下一篇Javascript 到 csv 导出编码问题