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。但是，我将tag-collection在页面上有很多 div，并且我想确保当有人单击删除按钮时，它只会删除tag-collection包含删除按钮的 div。

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 在下面所说，替换parents()为closest()可能更好，因为那只会选择一个祖先。

Answer 4

您可以使用该closest方法，试试这个：

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