jquery刪除所有附加元素

我試圖編寫待辦事項列表表單。此表單可以包含無限行。每行包含一個文本輸入字段，旁邊有2個按鈕。 1個按鈕在下面添加一個新行，第二個按鈕刪除該行。jquery刪除所有附加元素

問題是，當我點擊添加按鈕一堆，它刪除所有添加到它下面的元素，當我點擊該行的刪除圖標。

我希望我有道理，也許代碼會解釋發生了什麼。

繼承人的待辦事項列表表單頁面的PHP代碼：

<div class="table table-todo"> 

    <?php include 'projects-add-task.php'; ?> 

</div>

這裏是projects-add-task.php內容：

<div class="field"> 
<input type="text" name="task[]" /> 
<a href="#" title="Add Task Below" class="todo-add"><img src="images/icon-todo-add.png" alt="" onmouseover="this.src='images/icon-todo-add-h.png'" onmouseout="this.src='images/icon-todo-add.png'" /></a> 
<?php if ($_GET['show_delete'] == 'yes') { ?> 
<a href="#" title="Delete This Task" class="todo-delete"><img src="images/icon-todo-delete.png" alt="" onmouseover="this.src='images/icon-todo-delete-h.png'" onmouseout="this.src='images/icon-todo-delete.png'" /></a> 
<?php } ?> 
<div style="clear: both;"></div> 
</div>

下面是心不是工作100％正確的jQuery：

$('.todo-add').live('click', function (e) { 
    e.preventDefault(); 
    $parent = $(this).parent('.field');  
    $.get('projects-add-task.php?show_delete=yes', function (data) { $parent.append(data); }, 'html'); 
}); 

$('.todo-delete').live('click', function (e) { 
    e.preventDefault(); 
    $(this).parent('.field').remove(); 
});

我不得不使用live作爲.todo-add圖標，因爲它對於新添加的行不是很明顯。然而im不確定這是否對.todo-delete圖標是必要的，但我確實這樣做了。

任何幫助將不勝感激這個問題。

來源

2012-11-19 scarhand

我想你需要after，而不是append：

function (data) { $parent.append(data); }

應該

function (data) { $parent.after(data); }

此外，live其實現在已經過時了。你應該使用on。

來源

2012-11-19 02:11:53

嘗試使用'on'，不起作用。「live」運行良好，「after」功能起到了魅力。 – scarhand

也許你使用的是舊版本的jQuery，無論如何你得到你需要的:) –

你正在添加很多div的類「字段」，然後讓jquery在刪除按鈕上刪除它們。

你需要要麼有唯一的ID爲每行，然後刪除ID元素OS只是工作witht他刪除按鈕的家長，沒必要指定「點域」在父（）

$('.todo-delete').live('click', function (e) { 
    e.preventDefault(); 
    $(this).parent().remove(); 
});

來源

2012-11-19 02:13:51

不，我不需要一個唯一的ID，使用'parent'函數找到被單擊的元素的父元素並相應地刪除它。如上所述，問題是我使用'append'而不是'after'。 – scarhand

jquery刪除所有附加元素

回答

相關問題