Question

我有一个删除链接，会删除我页面上的当前评论。它使用ajax来更改数据库，一旦成功，我想删除注释所在的div。页面上的每个注释都如下所示：

<div class="aComment">
    <span class="commentTitle">Posted by xxx at xxx - <a href="javascript:void(0)" class="deleteComment" data-commentid="anID"><img src="resources/images/delete_comment.png" title="Remove this comment" /></a></span>
    <span class="commentText">comment text here</span>
</div>

一旦它恢复成功，我无法弄清楚如何删除div。我试过了

$(this).parent().remove();

没有运气。 $(this)是指锚标记，因此锚点的parent()应该是<div class="aComment">权利吗？

Answer 1

使用closest()：

$(this).closest(".aComment").remove();

Example

a标记的父级是span。您要删除的div是span的父级。

使用它的原因仅仅是因为它比使用parent()两次更方便。

Answer 2

在你的Ajax回调this中没有引用锚元素，但即使这样做，.parent()方法也会返回 immediate 父元素，即span元素，而不是div。

假设您有对锚点的引用，您可以说：

 $theAnchor.parent().parent().remove();  // get a's parent's parent

...但当然这有点脆弱，因为如果你以后更改html结构，你必须将代码更改为。因此，最好使用.closest()将树搜索到最近的匹配的祖先元素：

$theAnchor.closest("div").remove();

您没有显示您的点击处理程序，但它必须是这样的：

$(".aComment a").click(function() {
   // keep a reference to the clicked a element for use
   // in the ajax callback
   var $theAnchor = $(this);

   $.ajax(/* your ajax parameters here */, function() {
      $theAnchor.closest("div").remove();
   });
});

Answer 3

应该是

$(this).parent().parent().remove();

Answer 4

最好通过在代码中为注释设置ID来解决此问题。

例如：

<div class="aComment" data-comment-id="5">

然后将此ID与您的AJAX请求和响应一起使用。

多一点工作，但它更健壮（IMO）

Answer 5

如果您尝试通过点击删除它：

$(".aComment a").on('click', function(){
    $(this).closest(".aComment").remove();
});

http://jsfiddle.net/gaQuu/

按类名删除父div - jquery

5 个答案: