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

这是我的待办事项清单。 （为了使我的代码更具可读性，我尝试了注释。我希望它能起作用。）

如果您尝试我的演示，您可以使用“添加”按钮添加li项目。li项目还有两个按钮。 我想创建一个修改按钮，用户可以修改他们的列表项。我不知道我能用jQuery做些什么

第二个问题是列表按钮不能很好地工作。因为如果我使用一次删除按钮，它会将“完成”按钮更改为删除项目。但是如果我不使用“删除”按钮，则“完成”按钮工作正常。 我不知道为什么，也许是同一个类名的问题

以下是我在JS-Bin中的演示：

---

我的解决方案背后的想法是对添加的字段使用

contenteditable

属性。为此，您需要将前两个字段动态包装到另一个div中，如下所示：

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

关于第二个问题：

你的目标定位有问题。必须使用

closest（）

方法引用当前的

list\u项

对于mark：

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

删除：

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

你喜欢JSFIDLE.net吗？我试过你的代码，哇，它工作了。非常感谢。我以前不知道这件事。关于我的按钮，请再试一次，添加5项，在第一个元素上使用一次delete按钮，然后在最后一个元素上使用done按钮。它将被删除。@EndreKovács，你好。是的，有这样一个问题。我更新了我的答案并给了你密码。这对我来说非常有效。非常感谢你的工作。你能告诉我为什么代码不起作用吗？@EndreKovács，因为你在不同的选择器上点击了两下，使它们成为父子-这是不正确的。
$(".done").click(function(){
   $(this).closest(list_item).css("color","white")
   $(this).closest(list_item).css("text-decoration","line-through");
});

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