Question

我正在尝试编写待办事项列表表单。此表单可以包含无限的行。每行包含一个文本输入字段，旁边有2个按钮。其中一个按钮在下面添加一个新行，第二个按钮删除该行。

问题是，当我多次点击添加按钮时，它会删除当我点击该行的删除图标时在其下面添加的所有元素。

我希望我有意义，也许代码会解释最新情况。

下面是todo-list表单页面的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>

以下是没有正确工作的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图标，因为它对于新添加的行显然不起作用。但我不确定这是否是.todo-delete图标所必需的，但我确实这样做了。

这个问题将非常感谢任何帮助。

Answer 1

我认为您需要after而不是append：

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

应该是

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

此外，live现在实际上已弃用。您应该使用on。

Answer 2

您正在使用“field”类添加许多div，然后要求jquery在删除按钮上删除它们。

你需要拥有每一行的唯一ID，然后删除那个ID元素，只需使用删除按钮的父级，不需要在父级中指定'.field'（）

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

jquery删除所有附加元素

2 个答案: