javascript - 单击某个链接时，如何删除外部元素以及外部元素内的所有内容？

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个。当用户单击链接时，我将如何做到这一点，它会从容器中向内删除所有内容？因此，如果单击上面的链接之一，将产生以下结果:

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

编辑:如果新添加的元素也需要功能，请使用 live。

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