Javascript 清除已完成任务按钮待办事项列表

我一直在使用jQuery编写一个简单的待办事项列表，现在遇到了一些问题。我创建了一个编辑按钮，它工作得相当好，但我希望它能使当我按下enter键时，文本框变为未选中状态，文本在再次单击编辑按钮之前不再可编辑

我还试图添加一个Clear Completed（清除已完成）按钮，该按钮将清除所有“选中”项，但似乎无法针对要删除的正确项。任何提示都将不胜感激

$（文档）.ready（函数（）{
$（“#待办事项”）.focus（）；
函数addItem（）{
$（“#待办事项”）.append（“
”+$（“#待办事项”）.val（）+“DeleteEdit
”）；
$（“#todo”）.val（“”）；
}
//按enter键时添加项目
$（“#todo”）.keydown（函数（e）{
如果（e.which==13）
addItem（）；
});
//单击“添加”时添加项目
$（“#添加”）。单击（添加项）；
//使文本框内容可编辑
$（文档）。在（“单击“，”.edit'，函数（）上）{
$（this）.closest（“li”）.find（“span”）.prop（“contenteditable”，true）.focus（）；
//$（此）{
//如果（e.which==13）返回false；
//});
})
//从列表中删除项目
$（文档）.on（“单击“，”.delete'，函数（）{
$（this）.最近的（“li”）.淡出（function（）{
$（this.remove（）；
});
返回false；
})
//选中复选框时划掉文本
$（文档）.on（“单击“，”.done'，函数（）{
if（$（this）.closest（“li”）.find（“span”）.css（'textDecoration'）=='line-through'）{
$（this.nexist（“li”）.find（“span”）.css（“textdecommention”，“none”）；
}否则{
$（this）.closest（“li”）.find（“span”）.css（“textdearching”，“line-through”）；
}
})
//清除所有已完成的任务
$（文档）。在（“单击”，“清除”，函数（）上）{
if（$（this）.closest（“li”）.find（“span”）.css（'textDecoration'）=='line-through'）{
$（this.parent（）.remove（）；
}
})
});
正文{
字体：无衬线；
颜色：#00b33c；
背景色：#ffffff；
}
保险商实验室{
列表样式：无；
填充：0；
保证金：0；
宽度：700px；
}
李{
边框：2倍实心#fff；
背景：#e5ffff；
填充：10px 10px；
颜色：#000000；
宽度：500px；
}
李斯潘{
左侧填充：10px；
右边填充：200px；
}

待办事项清单

对于您的查询：

我希望这样，当我按enter键时，文本框将变为未选中状态，并且在再次单击编辑按钮之前，文本将不再可编辑。

使用此代码：

// finalize the edited span
$(document).on("keydown", 'span[contenteditable]', function (e) {
  if (e.which == 13) {
    $(this).removeAttr("contenteditable").blur();
    return false;
  }
});


清除已完成的按钮，该按钮将清除所有“选中”的项目，但似乎无法针对要删除的正确项目。

代码中有一个错误。您需要使用
#clear
，而不仅仅是
clear

//clear all completed tasks
$(document).on("click", '#clear', function() {
  $(".done:checked").each(function () {
    $(this).closest("li").remove();
  });
})


请参见最后的工作片段：


$（文档）.ready（函数（）{
$（“#待办事项”）.focus（）；
函数addItem（）{
$（“#待办事项”）.append（“
”+$（“#待办事项”）.val（）+“DeleteEdit
”）；
$（“#todo”）.val（“”）；
}
//按enter键时添加项目
$（“#todo”）.keydown（函数（e）{
如果（e.which==13）
addItem（）；
});
//单击“添加”时添加项目
$（“#添加”）。单击（添加项）；
//使文本框内容可编辑
$（文档）。在（“单击“，”.edit'，函数（）上）{
$（this）.closest（“li”）.find（“span”）.prop（“contenteditable”，true）.focus（）；
//$（此）{
//如果（e.which==13）返回false；
//});
})
//从列表中删除项目
$（文档）.on（“单击“，”.delete'，函数（）{
$（this）.最近的（“li”）.淡出（function（）{
$（this.remove（）；
});
返回false；
})
//选中复选框时划掉文本
$（文档）.on（“单击“，”.done'，函数（）{
if（$（this）.closest（“li”）.find（“span”）.css（'textDecoration'）=='line-through'）{
$（this.nexist（“li”）.find（“span”）.css（“textdecommention”，“none”）；
}否则{
$（this）.closest（“li”）.find（“span”）.css（“textdearching”，“line-through”）；
}
});
//清除所有已完成的任务
$（文档）。在（“单击”，“清除”，函数（）上）{
$（“.done:checked”）。每个（函数（）{
$（this）.最近的（“li”）.remove（）；
});
})
//完成编辑的跨度
$（文档）.on（“向下键”，“span[contenteditable]”，函数（e）{
如果（e.which==13）{
$（this.removeAttr（“contenteditable”）.blur（）；
返回false；
}
});
});
正文{
字体：无衬线；
颜色：#00b33c；
背景色：#ffffff；
}
保险商实验室{
列表样式：无；
填充：0；
保证金：0；
宽度：700px；
}
李{
边框：2倍实心#fff；
背景：#e5ffff；
填充：10px 10px；
颜色：#000000；
宽度：500px；
}
李斯潘{
左侧填充：10px；
右边填充：200px；
}

待办事项清单
我已经回答了，它正在工作<代码>：）
请检查并回复。抱歉耽搁了<代码>：）

如果需要进一步帮助，请告诉我。