实现点击一个删除按钮，该项内容就会被删除的效果。使用了创建元素节点的createElement()、在元素节点的末尾追加节点的appendChild()、获取元素内部HTML的innerHTML、获取某一个节点的父节点的parentNode。
具体步骤见注释。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<ul id="list"></ul>
<script>
//点击一个删除按钮，该项内容就会被删除
var arr = ["111", "222", "333"];
for (var i = 0; i < arr.length; i++) {
var oli = document.createElement("li"); //创建li
oli.innerHTML = arr[i]; //把arr内容放进li
var obutton = document.createElement("button");
obutton.innerHTML = "delete"; //创建删除按钮
obutton.onclick = handler; //绑定事件
oli.appendChild(obutton);
list.appendChild(oli);
//删除该按钮的父节点内容，即li
function handler() {
this.parentNode.remove();
}
}
</script>
</body>
</html>
运行结果：
点击第一个delete按钮，该行内容被全部删除。
扫一扫
1180
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
