刪除動態插入的HTML與jQuery

Question

我試圖動態創建和刪除列表中的項目，它 工作得很好......有點，我可以刪除項目，並創建項目，但 一旦一個項目已創建，我不能刪除它，但我可以 刪除頁面加載時出現的項目。

這裏是我的代碼

<div class="list"> 
    <div class="item"> 
     <input type="text" value="" /> 
     <a href="" class="removeitem">Remove this item</a> 
    </div> 
    <div class="item"> 
     <input type="text" value="" /> 
     <a href="" class="removeitem">Remove this item</a> 
    </div> 
    <a href="" class="additem">Add item to list</a> 
</div> 

<script type="text/javascript"> 
// Add item to list 
$('.additem').click(function(){ 
    var template = $($(this).prev().get(0)).clone(); 
    template.insertBefore($(this)); 
    return false; 
}); 

// Remove item from list 
$('.removeitem').click(function(){ 
    $(this).prev().parent().remove(); 
    return false; 
}); 
</script> 

我可以刪除2個原始項目，但是當我創造新的，他們 不能被刪除

Answer 1

您需要使用live events而不是正常的風格你目前正在使用。

點擊事件綁定在負載上，此時只有原始項存在綁定。

你可以使用現場這樣的活動：

<script type="text/javascript"> 
// Add item to list 
$('.additem').click(function(){ 
    var template = $($(this).prev().get(0)).clone(); 
    template.insertBefore($(this)); 
    return false; 
}); 

// Remove item from list 
$('.removeitem').live("click", function(){ 
    $(this).prev().parent().remove(); 
    return false; 
}); 
</script> 

有一個開銷使用實時事件（它有監視DOM中的所有事件，並檢查它們是否匹配，我相信）。因此，只有在必要時才使用它們。

Answer 2

變化：

$('.removeitem').click(function(){ 
    $(this).prev().parent().remove(); 
    return false; 
}); 

到：

$('.removeitem').live("click", function(){ 
    $(this).prev().parent().remove(); 
    return false; 
}); 

Answer 3

工作的呢？

$('.removeitem').live("click", function(){ 
$(this).parent('div.item').remove(); 
return false; 
}); 

其他使用.live（）是一個好主意，正如你已經知道的那樣。

Answer 4

另一種選擇現場活動將點擊事件附加到您的模板：

$('.additem').click(function(){ 
    var template = $($(this).prev().get(0)).clone(); 
    template.insertBefore($(this)); 
    $(template).click(function() { 
     $(this).prev().parent().remove(); 
     return false; 
    }; 
    return false; 
}); 

你不處理，包括現場活動的開銷的方式。如果你選擇這樣做，你可能想拉撈出碼入的功能，例如：

<script type="text/javascript"> 
    function removeitem() { 
     $(this).prev().parent().remove(); 
     return false; 
    } 
    // Add item to list 
    $('.additem').click(function(){ 
    var template = $($(this).prev().get(0)).clone(); 
    template.insertBefore($(this)); 
    $(template).click(removeitem); 
    return false; 
    }); 
    // Remove item from list 
    $('.removeitem').click(removeitem); 
</script>