jquery - 移除被点击的元素、它的父元素和父元素的前一个元素

Question

单击元素后，我试图删除下面的所有元素p。你能给我任何指示我哪里出错了吗？

<h2>Heading</h2>
<a href="#">
    <p>Click me to delete everything</p>
</a>

$('p').click(function() {
    $(this).remove().parent().remove().prev().remove();
});

这是一个jsfiddle。

Answer 1

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

小提琴

andSelf文档

.addBack()是andSelf也可以使用的别名。唯一的区别是addBack它只在 jQuery 1.8+andSelf中可用，而从 1.2 版开始可用。

parent()并且prev()是不言自明的，andSelf()也就是addBack简单地将前一组匹配元素添加到当前组，也就是说，它将.parent().prev()（父元素的上一个元素）与先前执行.parent()的（父元素）组合并一次性删除它们。

Answer 2

删除 之后<p>，它确实从 DOM中删除了。因此它不再有父母，并且.parent()不会工作。相反，首先选择所有元素，然后删除，例如http://jsfiddle.net/BcAa9/4/。

$('p').click(function() {
    $(this).parent().prev().addBack().remove();
});

Answer 3

<div>
<h2>Heading</h2>
<a href="#">
    <p>Click me to delete everything</p>
</a>
</div>
​
$('p').click(function() {
    $(this).parent().parent().remove();
});
​

小提琴

Answer 4

我建议（假设您要删除的前一个兄弟姐妹a：

$(this).closest('a').prev().andSelf().remove();

JS 小提琴演示。

如果您可以将元素包装在容器中，则变得更容易：

<div class="container">
    <h2>Heading</h2>
    <a href="#">
        <p>Click me to delete everything</p>
    </a>
</div>

$('p').click(
    function() {
        $(this).closest('.container').remove();
    });​

JS 小提琴演示。

参考：

• andSelf().
• closest().
• prev().
• remove().

Answer 5

您可能希望将所有内容包装在 div 或 span 标记中，然后使用 jquery 的最接近（）函数（http://api.jquery.com/closest/）查找该父元素并将其删除。这将使您的 javascript 代码更简洁。