jQuery一番上のコンテナIDを取得するには？私のページの

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> 

を私はしたいすべては、ユーザーがclass="remove_the_main_container"でspanでクリックしたときにclass="container"に（jQueryのを使用して）spanを削除することです。問題は - クリックしたスパン（class="remove_the_main_container"）が配置されている最上部のコンテナのIDを取得する方法は？

Answer 1

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

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

IDを削除する必要はありません。

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