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匹配的任何元素，都會運行此事件處理。

您可以使用與包含您要定位的這些div的穩定（靜態）元素匹配的選擇器替換#container ，必要時使用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;
})

現場樣本