jQuery删除所有附加元素

Question

I'm trying to code a todo list form. this form can contain unlimited rows. the rows each contain a text input field with 2 buttons beside it. 1 of the buttons adds a new row below, the second button deletes the row.

The problem is, when I click the add button a bunch of times, it removes ALL of the elements that were added below it when i click on the delete icon for that row.

I hope im making sense, maybe the code will explain whats going on.

Heres the PHP code for the todo-list form page:

<div class="table table-todo">

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

</div>

Here is the contents of 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>

Here is the jquery that isnt working 100% correctly:

$('.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();
});

I had to use live for the .todo-add icon because it was not working obviously for the newly appended rows. however im unsure if this is necessary for the .todo-delete icon, but i did it just to be sure.

Any help would be greatly appreciated with this issue.

Answer 1

I think you need after and not append :

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

should be

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

Also, live is actually deprecated now. You should be using on .

Answer 2

you are adding many divs with the class "field" and then asking jquery to delete them on the delete button.

you need to either have unique ID for each row and then delete that ID element os simply work witht he parent of the delete button, no need to specify the '.field' in the parent()

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