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.