如何使用jQuery删除父元素

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

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

有人可以给我小费吗？

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

怎么样使用unwrap（）

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

使用后-$(".child").unwrap()将-

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

使用parents()代替parent()：

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

删除父项：

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

删除所有父母：

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

您还可以使用以下命令：

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

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

我偶然发现了这个问题一个小时。一个小时后，我尝试调试，这有所帮助：

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