點擊某個鏈接時，如何去除外部元素和外部元素內的所有內容？

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容器具有相同的類。我如何做到這一點，當用戶點擊鏈接時，它會從容器中刪除所有內容？所以，如果點擊上面的鏈接之一，它會產生這樣的結果：

<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的元素。我不能在這裏應用這些知識，因爲如果用戶點擊其中一個鏈接，所有的容器都會消失。

Answer 1

這應該這樣做。

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

編輯：如果新添加的元素也需要功能，則使用活動。

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