javascript - Editing and Deleting Dynamically Generated List Items in jQuery Todo List App - Stack Overflow

admin管理员组

文章数量:1287820

I'm attempting to create a todo list app in HTML, CSS, and jQuery, and I'd like to be able to add, edit, and delete tasks. I'm able to add new tasks to the list, but I'm unable to edit or delete them when I click the "Edit" and "Delete" buttons, and I'm not sure why it isn't working.

I've uploaded a copy of my code to jsfiddle (/) and included a copy below.

Any help you can offer would be greatly appreciated. Thanks!

Expected Behavior:

• Clicking the "Delete" button next to a task should allow a user to delete that task.

• Clicking the "Edit" button next to a task should allow a user to edit the text of that task.

Actual Behavior:

• Clicking the "Delete" button does nothing.

• Clicking the "Edit" button does nothing.

Code Examples:

HTML

<h1>Todo List</h1>  
   <input type="text" id="enter_task" placeholder="Enter Task">
   <input type="submit" id="add" value="Add Task">
<p>
   <ul id="todo_list">
   </ul>
</p>

JavaScript

function enter_task () {
   var text = $('#enter_task').val();
   $('#todo_list').append('<li>'+ text + ' <input type="submit" id="edit" value="Edit">' + '<input type="submit" class="done" id="delete" value="Delete">'  +'</li>');
};

$('#edit').click(function(){
   $('li').attr('contenteditable','true');
});

$('#delete').click(function(){
   $('li').remove();
});

$(function() {
   $('#add').on('click', enter_task);
});

I'm attempting to create a todo list app in HTML, CSS, and jQuery, and I'd like to be able to add, edit, and delete tasks. I'm able to add new tasks to the list, but I'm unable to edit or delete them when I click the "Edit" and "Delete" buttons, and I'm not sure why it isn't working.

I've uploaded a copy of my code to jsfiddle (https://jsfiddle/LearningToCode/nndd1byt/6/) and included a copy below.

Any help you can offer would be greatly appreciated. Thanks!

Expected Behavior:

• Clicking the "Delete" button next to a task should allow a user to delete that task.

• Clicking the "Edit" button next to a task should allow a user to edit the text of that task.

Actual Behavior:

• Clicking the "Delete" button does nothing.

• Clicking the "Edit" button does nothing.

Code Examples:

HTML

<h1>Todo List</h1>  
   <input type="text" id="enter_task" placeholder="Enter Task">
   <input type="submit" id="add" value="Add Task">
<p>
   <ul id="todo_list">
   </ul>
</p>

JavaScript

function enter_task () {
   var text = $('#enter_task').val();
   $('#todo_list').append('<li>'+ text + ' <input type="submit" id="edit" value="Edit">' + '<input type="submit" class="done" id="delete" value="Delete">'  +'</li>');
};

$('#edit').click(function(){
   $('li').attr('contenteditable','true');
});

$('#delete').click(function(){
   $('li').remove();
});

$(function() {
   $('#add').on('click', enter_task);
});

• javascript
• jquery

Share Improve this question Follow asked May 27, 2015 at 20:15 LearningToCodeLearningToCode 4922 silver badges55 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

The problem is that your delete buttons are dynamically created. During page load, $('#delete') returns an empty set because there's no one there yet. When you finally have list items, their delete buttons are not bound to anything.

What you can do is delegate the event handler to an ancestor that exists during page load. Events "bubble" to its ancestors, making ancestors aware that you clicked a descendant. In this case, you can attach the handler to <ul>, and have it listen for clicks on .delete.

In addition, IDs are supposed to be unique. You can only have one of them on the page. Having more than one might lead to unpredictable behavior. Use classes instead.

Also, $('li') will select all <li> on the page. You might want to scope down your selection. You can remove the <li> containing your button using $(this).closest('li').remove()

The code you need should be this, plus add delete as the button class. Apply the same concept for the edit.

$('#todo_list').on('click', '.delete', function(){
  $(this).closest('li').remove()
});

I've created a working example - https://jsfiddle/nndd1byt/7/

function enter_task () {
    var text = $('#enter_task').val();
    $('#todo_list').append('<li>'+ text + ' <input type="submit" class="edit" value="Edit">' + '<input type="submit" class="done delete" value="Delete">' +'</li>');
};

$('#todo_list').on('click', '.edit', function(){
    $(this).parent().attr('contenteditable','true');
});

$('#todo_list').on('click', '.delete',function(){
    $(this).parent().remove();
});

$(function() {
    $('#add').on('click', enter_task);
});

Try adding the jquery function initializers into the enter_task function, this way they are refreshed with each new line.

var counter = 1;

function enter_task () {
        var text = $('#enter_task').val();
        $('#todo_list').append('<li><span>'+ text + ' </span><input type="submit" id="edit' + counter + '" value="Edit">' + '<input type="submit" class="done" id="delete' + counter + '" value="Delete">' +'</li>');
  
$('#edit' + counter).click(function(){
    $(this).prev().attr('contenteditable','true');
    $(this).prev().focus();
});

$('#delete' + counter).click(function(){
    $(this).parent().remove();
});

  counter++;
};

$(function() {
    $('#add').on('click', enter_task);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Todo List</h1>  
    <input type="text" id="enter_task" placeholder="Enter Task">
    <input type="submit" id="add" value="Add Task">
    <p>
        <ul id="todo_list">
        </ul>
    </p>

本文标签： javascriptEditing and Deleting Dynamically Generated List Items in jQuery Todo List AppStack Overflow