使用 jQuery 创建列表项后如何修改它？

Question

This is my todo list what I made. (To make my code more readable I tried to comment. I hope it worked.)

If you try my demo, you can add li items with the "add" button. And the li items has 2 more buttons. I want to create a modify button to users with can modifying their list items. I have no idea what I can to do for this with jQuery.

Second problem is that list buttons don't work perfectly well. Because if I use once a delete button it change the done button to delete an item. But if I dont use the delete button, the done button is working well. I dont know why, maybe the same class name is the problem?

Here is my demo in JS Bin: https://jsbin.com/natiziqawa/edit?html,js,output

   $(document).ready(function(){
     $("#add").click(function(){

 // Created list elements and their's buttons
    var list_item =document.createElement("li");
      var remove_button=document.createElement("button");
      var done_button=document.createElement("button");
     


 // append the buttons some string to caption buttons
   

   $(remove_button).append("Delete");
   $(done_button).append("Done");


   


 
 // added class name the items to to distinguish them 

  $(list_item).addClass("item")
  $(remove_button).addClass("delete"); 
  $(done_button).addClass("done"); 
  



 // filled  the created items with the input values
 
 var list_text =$("#input").val();
 var time=$("#time").val();
 
 
 // filled the list item with their's  buttons and class names and input values

 $(list_item).append(time,"   :   ",list_text,done_button,remove_button); 

 // finally fill the ul with list items but first check out what is written in the input


 if(input.value==""){
   alert("Please enter an activity")
 
  }


  // If the input has some value  can go 

  else{
 $("ul").append(list_item);

 // after clicked, clear the input field
 $("#input").val("");
 
  


// list item's buttons


$(".done").click(function(){

  $(list_item).click(function(){
    $(this).css("color","white")
    $(this).css("text-decoration","line-through")
  }); 
});





$(".delete").click(function(){
    $(list_item).click(function(){
      $(this).remove()
    }); 
  });

}

  });// main function close
  
}); // document ready close

Answer 1

The idea behind my solution is to use the contenteditable attribute for the added fields. To do this, you need to dynamically wrap the first two fields in an additional div, as shown here:

$(list_item).append('<div class="edit_item" contenteditable="true">'+time+'</div>',"   :   ",'<div class="edit_item" contenteditable="true">'+list_text+'</div>',done_button,remove_button); 

You will need to replace this code with your existing one. For a better understanding, this code is located in the comment: "// filled the list item with their's buttons and class names and input values"

Also, you need to add this rule to the css to align the fields:

.edit_item {
  display: inline-block;
}

And regarding the second question:

You had a targeting problem. You must refer to the current list_item using the closest() method.

For mark:

$(".done").click(function(){
   $(this).closest(list_item).css("color","white")
   $(this).closest(list_item).css("text-decoration","line-through");
});

For removing:

$(".delete").click(function(){
   $(this).closest(list_item).remove();
});