javascript - jQuery 删除 div onclick

Question

当我删除某些内容时，我似乎无法让我的 jQuery 正确删除 div

代码是：

<div class="amend_order" data-item_key="1367264719mz7">
    <p>Home Made Ice Cream</p>
    <p class="small_text">Pistachio</p>
    <p>
        <a class="edit_item ui-link" href="javascript:void(0);">Edit</a>
        ----
        <a class="deleter ui-link" href="javascript:void(0);">Delete</a>
    </p>
</div>

我试过使用

$(this).closest('div').remove();

不幸的是，这不起作用。

基本上有几个列表，divs我只是希望它们在单击时消失。

Answer 1

如果您的容器 div 是动态添加的，则需要使用事件委托。尝试这个：

$("#container").on("click", ".amend_order .deleter", function () {
    $(this).closest("div").remove();
});

演示：http: //jsfiddle.net/m6jVP/

如果它们是动态添加的，则事件绑定实际上不会找到任何元素，因此在单击它们时不会执行。当单击选择器时，此事件处理会针对#container与选择器匹配的任何元素运行。.amend_order .deleter

您可以替换#container为与包含您要定位的这些 div 的稳定（静态）元素匹配的选择器，document如有必要，请使用。

Answer 2

HTML

<div class="amend_order" data-item_key="1367264719mz7">
    <p>Home Made Ice Cream</p>
    <p class="small_text">Pistachio</p>
    <p>
    <a class="edit_item ui-link" href="javascript:void(0);">Edit</a>
    ----
    <a class="deleter ui-link" href="javascript:void(0);">Delete</a>
</p>
</div>

JS

$('.deleter').on('click', function(){
  $(this).closest('div').remove();
})

现场示例http://jsfiddle.net/Ny346/

Answer 3

尝试指向 div：

$('div.amend_order').click(function(){
   $(this).remove();
});

或单击删除按钮时：

$('a.deleter.ui-link').click(function(){
   $(this).parent('div').remove();
});

Answer 4

尝试这个：

$('.deleter').on('click', function(){
  $(this).parent().parent().remove;
})

现场样品