如何使用jQuery删除父元素 [英] How to delete parent element using jQuery

问题描述

我的jsp中有一些列表项标签。每个列表项都包含一些元素，包括一个名为delete的链接（a标签）。我想要的就是在点击链接时删除整个列表项。

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.

这是我的代码的结构：

$("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的新手，所以我尝试了一些东西，例如：

But this doesn't work. I'm new at jQuery, so I tried some things, like for example:

$(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?

推荐答案

只需使用 .closest（） 方法： $（this）.closest （'。li'）。remove（）;

它从当前元素开始，然后爬上链寻找匹配的元素，并在找到一个元素后立即停止。

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.

.parent（） 只访问元素的直接父元素，即 div.msg-modification 与。李。所以它永远不会到达你想要的元素。

.parent() only accesses the direct parent of the element, i.e. div.msg-modification which does not match .li. So it never reaches the element you are looking for.

.closest（） （检查当前元素，然后爬上链）将使用 .parents（） - 但是，这有一点需要注意，它一找到匹配的元素就不会停止（并且它没有检查当前元素，但仅检查 父元素。在你的情况下，它并不重要，但对于你想要做的事情 .closest（）是最合适的方法。

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 only parent elements). In your case it doesn't really matter but for what you are trying to do .closest() is the most appropriate method.

从不使用相同的ID超过一个要素。这是不允许的，并导致非常难以调试的问题。从链接中删除 id =191，如果您需要在点击处理程序中访问ID，请使用 $（this）.closest （ '李 '）。ATTR（' 编号'）。实际上，如果您使用 data-id =123然后 .data（'id'）而不是 .attr（'id'）来访问它（所以你的元素ID不需要类似（数据库？）行的任何ID）

NEVER use 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)

这篇关于如何使用jQuery删除父元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！