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删除所有附加元素

回答

相关问题