根据类名删除父级div - jQuery

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">，对吧？

- Ronnie

---

你需要额外添加一个 .parent()，因为锚点标签的父元素是 span，而不是 div。 - Kevin B

是的，你也是对的，我错了一个。 - Ronnie

Answer 1

在您的Ajax回调中，this不是指锚点元素，但即使它是，.parent()方法也只会返回直接的父元素，即span元素，而非

元素。

假设您有一个对锚点的引用，您可以这样说：

 $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();
   });
});

- nnnnnn

---

所以 $(".deleteComment").live("click",function() { $(this) }); 不是指 deleteComment？ - Ronnie

在这种情况下，是的，this指的是元素，但你说你想在ajax返回成功后删除该元素，我假设你会在ajax回调函数中执行此操作，此时this不指向任何特定的元素（除非你使用.load()，这很奇怪）。 - nnnnnn

啊，好的，我现在明白了，并且我让它工作了。这就是我所做的...基本上就像你上面展示的一样http://pastie.org/3499974谢谢。 - Ronnie

Answer 2

使用closest()：

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

示例。

a 标签的父元素是 span。你要删除的 div 是那个 span 的父元素。

使用这种方法的原因很简单，它比两次使用 parent() 更加方便。

- Purag

---

啊，你说得对，但它仍然没有移除 div。我认为这可能是因为我在 prettyPhoto 窗口内部：http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/。我将使用 closest 并尝试让它起作用。 - Ronnie

Answer 3

我应该是

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

- DG3

Answer 4

如果你正在尝试在点击时删除它：

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

http://jsfiddle.net/gaQuu/

- John Leehey

Answer 5

你最好通过在代码中为评论设置一个ID来解决这个问题。

例如：

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

然后使用这个ID进行AJAX请求和响应。

多做一点工作，但更加健壮（在我看来）

- Jason McCreary