<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo_记事本</title>
<link rel="stylesheet" href="Todo.css">
</head>
<body>
<input type="text" placeholder="What needs to do done?" id="shuru">
<div class="xiangmu"><input type="checkbox" class="xuanze">
<div class="contact">${todo}</div><img src="./第三轮考核image/关闭1.png" class="guanbi"></div>
<div class="function">
<div class="items-left">items-left</div>
<div class="all-list">All</div>
<div class="Active">Active</div>
<div class="completed">Completed</div>
<div class="clear-completed">clear-completed</div>
</div>
<script>
var xuanze = document.getElementsByClassName('xuanze');
var shuru = document.querySelector('#shuru'); //输入框
var contact = document.querySelector('.contact'); //项目框
var xiangmu = document.querySelector('.xiangmu');
var todocontact = function(todo) {
var s = `<div class="xiangmu"><input type="checkbox" class="xuanze"> <div class="contact">${todo}</div><img src="./第三轮考核image/关闭1.png" class="guanbi"></div>`
return s;
}
var insert = function(todo) {
shuru.insertAdjacentHTML('afterend', todocontact(todo))
}
shuru.onkeydown = function() {
var ev = window.event;
if (ev.keyCode == 13) { // 如（ev.ctrlKey && ev.keyCode==13）为ctrl+Center 触发
var todo = shuru.value;
insert(todo);
}
} //回车触发
var guanbi = document.getElementsByClassName('guanbi');
for (var i = 0; i < guanbi.length; i++) {
guanbi[i].onclick = function() {
xiangmu.remove();
console.log('shanchu');
}
}
</script>
</body>
</html>
真的不知道，为啥，思索了很久，一直没答案，还是大一的学生
1、如果是嵌入的HTML片段上有事件，使用原生js需要在标签上加事件处理
2、如果使用js框架做HTML片段嵌入，在新加入片段上做事件处理要先考虑框架上动态绑定事件，如果没有，则需要利用原生方式绑定
当前程序片段的处理建议：
1、一般情况下，HTML片段的隐藏要比HTML片段动态嵌入要好。HTML片段隐藏是纯视图上的操作，HTML动态嵌入则是逻辑+视图的混合操作
2、请先学习原生js打牢基础，原生js是没有${todo}这种写法的，如果出现这种语法，一般是引用了js框架，检查一下
我今天也遇到了，没找到原因，之后将通过class获取换成id获取就好了