Question

在我的页面上，我有很多html控件看起来像这样：

<span id="pic1" class="container">
    <span class="inner">
       <span class="img"></span>
       <span class="strip"></span>
       <span class="remove_the_main_container"></span>
    </span>
</span>

我想做的就是当用户点击span class="container"时，span与class="remove_the_main_container"删除（使用jQuery）。问题是 - 如何获取点击范围（class="remove_the_main_container"）所放置的最顶层容器的ID？

Answer 1

您不应该需要ID来删除它。

$('.remove_the_main_container').click(function() {
    $(this).parents('.container').remove();
});

Answer 2

如果最顶层的容器始终具有container类，您可以执行以下操作来获取ID：

var id = $(".remove_the_main_container").parents(".container").attr("id");

但是你没有需要 id来删除容器。你可以这样做：

$(".remove_the_main_container").bind("click", function(eventObj) {
    $(this).parents(".container").remove();
});

Answer 3

此代码与remove_the_main_container的实例相关，因此不需要ID或任何此类代码。

jQuery('.remove_the_main_container').bind('click', function (e) {
      jQuery(e.currentTarget).parents('.container').remove();
});

Answer 4

您可以使用jQuery's .closest() method转到与您提供的选择器匹配的第一个祖先。

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

这样，如果有其他祖先使用container类，它们就不会受到影响。

或者，如果您的意思是要删除span，而不删除其内容，请转到.inner元素，然后使用jQuery's unwrap() method。

$('.remove_the_main_container').click(function() {
    $(this).closest('.inner').unwrap();
});

jQuery如何获得最顶层的容器ID？

4 个答案: