javascript-如何使用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();

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

有人可以给我小费吗?

Noob asked 2019-10-09T03:38:45Z
5个解决方案
105 votes

只需使用id="191"方法:id="191"
它从当前元素开始,然后爬上链寻找匹配的元素,并在找到元素后立即停止。

id="191"仅访问元素的直接父级,即id="191",与$(this).closest('.li').attr('id')不匹配。因此,它永远不会到达您要查找的元素。

除了id="191"(检查当前元素然后爬上链)之外的另一种解决方案是使用id="191"-但是,这有一个告诫,即一旦找到匹配的元素,它就不会停止(并且它不会检查 当前元素,但只有父元素)。 对于您而言,这并不重要,但是对于您要尝试执行的操作,id="191"是最合适的方法。


另一个重要的事情:

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

ThiefMaster answered 2019-10-09T03:39:31Z
15 votes

使用parents()代替parent()

$("a").click(function(event) {
  event.preventDefault();
  $(this).parents('.li').remove();
});
josemota answered 2019-10-09T03:39:58Z
15 votes

怎么样使用unwrap()

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

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

<p class="child">
</p>
dav answered 2019-10-09T03:40:30Z
6 votes

删除父项:

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

删除所有父母:

$(document).on("click", ".remove", function() { 
       $(this).parents().remove();
});
Andrea_dev answered 2019-10-09T03:41:02Z
0 votes
$('#' + catId).parent().remove('.subcatBtns');
Itisha-systematix answered 2019-10-09T03:41:21Z
translate from https://stackoverflow.com:/questions/6647736/how-to-delete-parent-element-using-jquery