javascript - jQueryを使用してクラスの親要素を選択する

Question

JS：

$(function(){
    $(".remove").click(function(){
        $("<need the right selector>").hide();
    });
});

HTML：

<div class="tag-collection">
    <div class="key">PULMONARY_EMBOLISM <span class="remove">✘&lt;/span></div>
</div>

上記のjQueryコードを使用して、div全体を削除しますtag-collection。ただし、ページには多くのdivがあり、誰かが削除ボタンをクリックしたときに、削除ボタンが含まれていたdivtag-collectionのみが削除されるようにしたいと思います。tag-collection

Answer 1

それらがたくさんある場合、これはより少ないリスナーをバインドするので、より「効率的」/軽量です：

$(function(){
    $(document).on('click', 'span.remove', function() {
        $(this).closest('.tag-collection').hide();
    });
});

Answer 2

$(".remove").click(function(){
    $(this)  // points to clicked element
        .closest('.tag-collection') // jump to parent tag-collection
        .hide(); // hide that
});

Answer 3

$(function(){
    $(".remove").click(function(){
        $(this).parents('.tag-collection').hide();
    });
});

3行目を強調します。

編集： Kevin Bが以下に述べているように、 1つの祖先のみが選択されるため、置換parents()する方がおそらく優れています。closest()

Answer 4

この方法を使用できます。closestこれを試してください。

$(function(){
    $(".remove").click(function(){
        $(this).closest('.tag-collection').remove();
    });
});