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

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

2 个答案: