按类名删除父 div - jquery答案

【问题标题】：Remove parent div by class name - jquery按类名删除父 div - jquery
【发布时间】：2012-03-01 22:32:47
【问题描述】：

我有一个删除链接，它将删除我页面上的当前评论。它使用 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"> 对吧？

【问题讨论】：

您需要一个额外的.parent()，因为锚标记的父级是span，而不是div。
对，你也说得对，我差了一个

标签： jquery

【解决方案1】：

在您的 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();
   });
});

【讨论】：

so $(".deleteComment").live("click",function() { $(this) });不是指deleteComment？
在这种情况下是的，this 指的是元素，但是你说你想在 ajax 返回成功后删除元素，我假设你会在 ajax 回调函数中这样做哪一点 this 没有引用任何特定元素（除非您使用的是 .load()，这会很奇怪）。
啊，好吧，我现在明白了，我让它工作了。这就是我所做的......基本上你在上面显示的pastie.org/3499974谢谢你

【解决方案2】：

使用closest():

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

Example.

a 标签的父标签是span。您尝试删除的 div 是该 span 的父级。

之所以使用它，仅仅是因为它比使用两次parent() 更方便。

【讨论】：

啊，你是对的，但它仍然没有删除 div。我认为这可能是因为我在一个 prettyPhoto 窗口中：no-margin-for-errors.com/projects/…。我将使用最接近的并尝试让它工作

【解决方案3】：

应该是

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

【讨论】：

【解决方案4】：

您最好通过在代码中为评论设置 ID 来解决此问题。

例如：

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

然后将此 ID 用于您的 AJAX 请求和响应。

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

【讨论】：

【解决方案5】：

如果您想通过点击将其删除：

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

http://jsfiddle.net/gaQuu/

【讨论】：