如何使用jQuery删除父元素

Question

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

这可行，它会删除指示的列表项，但它不是“动态的”。

有人可以给我小费吗？

Answer 1

只需使用.closest() 方法：$(this).closest('.li').remove();
它从当前元素开始，然后沿着链向上寻找匹配元素，并在找到匹配元素后立即停止。

.parent() 只访问元素的 direct 父元素，即与 .li 不匹配的 div.msg-modification。所以它永远不会到达您正在寻找的元素。

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

---

另一个重要的事情：

切勿对多个元素使用相同的 ID。这是不允许的，并且会导致非常难以调试的问题。从链接中删除id="191"，如果您需要访问点击处理程序中的ID，请使用$(this).closest('.li').attr('id')。实际上，如果您使用data-id="123" 然后使用.data('id') 而不是.attr('id') 来访问它会更干净（因此您的元素ID 不需要类似于（数据库？）行具有的任何ID）

Answer 2

如何使用unwrap()

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

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

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

Answer 3

使用parents() 代替parent()：

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

Answer 4

删除父级：

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

删除所有父母：

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

Answer 5

你也可以这样用：

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

Answer 6

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

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

Answer 7

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