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のclosest（）関数（http://api.jquery.com/closest/）を使用してその親要素を見つけ、それを削除することをお勧めします。これにより、JavaScriptコードが少しすっきりします。