简单的添加和删除还原ToDoList的简单功能
当输入内容的时候需要判断是否为空？然后再通过键盘enter验证进入，以免输入空也可以。
添加：首先找到需要添加到的位置，然后通过jq的添加方法（append()，appendto()…等等）将input框里面的内容加入到元素内容。
当你完成一项的时候点击复选框也需判断是否为checked；如是则加入到已完成的里面。
删除：点击自己时找到自己的父级，如果不是就在往上找直到找到位置，在remove；
话不多说直接上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.js"></script>
</head>
<style>
* {
padding: 0;
margin: 0;
}
.boby {
width: 800px;
border: 1px black solid;
margin: 0 auto;
background-color: #CDCDCD;
}
.nav {
width: 800px;
height: 50px;
background-color: black;
border: 1px solid rgb(37, 33, 33);
line-height: 50px;
}
.inp1 {
width: 400px;
height: 25px;
border-radius: 10px;
margin-left: 200px;
}
.nav2 {
width: 800px;
height: 70px;
line-height: 70px;
padding-left: 50px;
}
.tianjia {
width: 800px;
border: 1px solid rgb(37, 33, 33);
}
.tj div {
width: 700px;
height: 40px;
background-color: white;
margin-left: 50px;
margin-top: 10px;
line-height: 40px;
}
.tj div input{
background-color: red;
}
.tj div img {
margin-left: 400px;
width: 30px;
height: 30px;
float: right;
margin-top: 3px;
}
.wc {
margin-bottom: 10px;
}
.wc div {
width: 700px;
height: 40px;
background-color: #E6E6E6;
margin-left: 50px;
line-height: 40px;
margin-top: 10px;
}
.wc div img {
margin-left: 400px;
width: 30px;
height: 30px;
float: right;
margin-top: 3px;
}
</style>
<body>
<div class="boby">
<div class="nav">
<span style="font-size: 1.5em;font-weight: bolder;color: white;margin-left: 50px;">ToDoList</span>
<input class="inp1" type="text" placeholder="添加ToDo">
</div>
<div class="nav2">
<span style="font-size: 1.5em;font-weight: bolder;">正在进行</span>
<span id="wb1" style="font-size: 1.5em;font-weight: bolder;margin-left:600px ;">0</span>
</div>
<div class="tj">
</div>
<div class="nav2">
<span style="font-size: 1.5em;font-weight: bolder;">已经完成</span>
<span id="wb2" style="font-size: 1.5em;font-weight: bolder;margin-left:600px ;">0</span>
</div>
<div class="wc"></div>
</div>
</body>
<script>
$(document).keydown(function (e) {
if (!$(".inp1").val() == "") {//不能为空格
if (e.key == "Enter") { //当按下enter 获取ipt的值
$(".tj").append(`
<div >
<input type="checkbox"></input>
<span>${$(".inp1").val()}</span>
<img src="./删除.png" >
</div>
`)
}
}
//文本
$("#wb1").html($(".tj").find("div").length)
})
$(".tj").on("click", "div", function (e) {
console.log($(e.target))
if ($(e.target).prop("checked")) {
$(e.target).parent().remove();
$(".wc").append($(e.target).parent())
}
//文本
$("#wb2").html($(".wc").find("div").length)
$("#wb1").html($(".tj").find("div").length)
})
//删除
$(".tj").on("click", "img", function (e) {
console.log($(e.target))
if (confirm("是否确认删除")) {
$(e.target).parent().remove();
$("#wb2").html($(".wc").find("div").length)
$("#wb1").html($(".tj").find("div").length)
}
})
$(".wc").on("click", "img", function (e) {
console.log($(e.target))
if (confirm("是否确认删除")) {
$(e.target).parent().remove();
$("#wb2").html($(".wc").find("div").length)
$("#wb1").html($(".tj").find("div").length)
}
})
</script>
</html>
效果