如何使用jQuery删除父元素

Question

如何使用jQuery删除父元素

79

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

这个可以运行，它可以删除指定的列表项，但它并不是“动态的”。

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

- Noob

7个回答

30

使用unwrap()怎么样？

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

使用 - $(".child").unwrap() - 后，它将变成以下样子：

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

- dav

这应该是答案，然后删除子元素。 - Jevon

简单易用，非常实用。强烈推荐。 - Mengseng Oeng

18

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

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

- josemota

2

这将删除所有带有li标签的父元素。 - Hatim

11

删除父级：

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

删除所有父级：

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

- Prais

当您创建了一些实时元素时，这将完美运作。很棒！ - Moxet Jan

2

我遇到了这个问题已经一个小时了。在一个小时后，我尝试进行调试，这有所帮助：

$('.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>

- Shivam Jha

1

你也可以使用这个：

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

- Andres Paul

0

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

- Itisha-systematix

4

尽管这段代码片段可能解决了问题，但是包括一些解释说明真的可以提高您的帖子质量。请记住，您正在回答未来读者的问题，而这些人可能不知道您提供代码建议的原因。 - Kyll

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ThiefMaster · Accepted Answer

只需使用.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），那将更清晰一些。