リンクをクリックすると、外側の要素と外側の要素のすべてを削除する方法はありますか？

Question

リンクをクリックすると、リンクに含まれるdiv（およびその中の他のすべての要素）を削除するにはどうすればよいですか？

<div class="container"> 
    <div class="inner-container">Content</div> 
    <a class="remove-outer" href="">Link</a> 
</div> 

<div class="container"> 
    <div class="inner-container">Content</div> 
    <a class="remove-outer" href="">Link</a> 
</div> 

<div class="container"> 
    <div class="inner-container">Content</div> 
    <a class="remove-outer" href="">Link</a> 
</div> 

同じクラスのdivコンテナが3つあります。ユーザーがリンクをクリックしたときにコンテナからすべてを取り除くように、どうすればいいですか？上のリンクの1つをクリックすると、次のようになります。

<div class="container"> 
    <div class="inner-container">Content</div> 
    <a class="remove-outer" href="">Link</a> 
</div> 

<div class="container"> 
    <div class="inner-container">Content</div> 
    <a class="remove-outer" href="">Link</a> 
</div> 

私はかなり新しいです。一意のIDを持つ要素を削除する方法しか知りません。ユーザーがリンクの1つをクリックすると、すべてのコンテナがなくなるため、ここでその知識を適用することはできません。このような

Answer 1

これはそれを行う必要があります。

$(function(){ 
    $("a.remove-outer").click(function(){ 
     $(this).parent().remove(); 
    }); 
}); 

編集：新しく追加された要素にも機能が必要な場合は、liveを使用します。

$(function(){ 
    $("a.remove-outer").live("click", function(){ 
     $(this).parent().remove(); 
    }); 
}); 

Answer 2

何かがそれを行う必要があります。

$('a.remove-outer').click(function(e) { 
    e.preventDefault(); 

    $(this).closest('.container').remove(); // find the nearest ancestor element with the class container and remove it 
});