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

Fiddle

andSelf docs

.addBack()是andSelf的别名，也可以使用。唯一的区别是addBack仅适用于jQuery 1.8+，而andSelf自版本1.2起可用。

parent()和prev()不言自明，andSelf()又称addBack只是将前一组匹配的元素添加到当前集合中，即它将{{{}}组合在一起1}}（父元素的prev元素）与之前执行的.parent().prev()（父元素）并一次性删除它们。

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

Fiddle

Answer 4

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

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

JS Fiddle demo

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

<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 Fiddle demo

参考文献：

Answer 5

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

删除clicked元素，其父元素和父元素的前一元素

5 个答案: