问题描述
大家好,我打算制作一个待办事项列表,但我遇到了一个问题,我想制作一个像这样内嵌在列表项中的按钮<li>my task</li><button>Delete</button>
但是我的删除按钮没有正确删除项目它只删除了一个项目然后开始出错
这是我的代码,请看这里并告诉我我在做什么类型的错误我是网络开发的初学者
<!DOCTYPE html>
<html>
<body>
<input type="text" placeholder="Enter Task" onfocus="this.value=''" id="myTask">
<button onclick="myFunction()">Try it</button>
<button onclick="deleteTask()">del it</button>
<ol id="myList">
</ol>
<script>
function myFunction() {
var node = document.createElement("LI");
var myTask = document.getElementById("myTask").value;
var textnode = document.createTextNode(myTask);
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
var btn = document.createElement("input");
var abcelements = document.querySelectorAll('LI');
for (var i = 0; i < abcelements.length; i++){
abcelements[i].id = 'abc-' + i;
}
// node.setAttribute("id","li1");
btn.setAttribute("type","submit");
btn.setAttribute("value","delete");
btn.setAttribute("id","delete");
node.appendChild(btn);
btn.addEventListener('click',()=>{
// console.log("OK");
document.getElementById("abc-0").parentNode.removeChild(document.getElementById("abc-0"))
})
}
function deleteTask() {
var i = 0;
var item = document.getElementsByTagName("LI")[i];
i++;
item.parentNode.removeChild(item);
}
</script>
</body>
</html>
所以当我点击Try it按钮
时,我只想为每个列表项制作一个删除按钮解决方法
尝试这样的事情:
function myFunction() {
const li = document.createElement("li");
li.innerHTML = document.getElementById("myTask").value;
const button = document.createElement("button");
button.innerHTML = "delete";
li.appendChild(button);
button.addEventListener("click",() => li.parentNode.removeChild(li));
document.getElementById("myList").appendChild(li);
}
,
需要解决的一些问题:
- 不要调用函数 myFuntion。给它一个描述性的名字,比如 addTask
- 不要创建带有序列号的 id 属性。这几乎是不需要的。
- 初始 HTML 不应有删除按钮,因为它应该与列表项相关联。
- 不要将删除按钮的类型设为“提交”。只有当您有
form
元素并且需要提交表单时,这才有意义。 - 不要一遍又一遍地为创建的按钮提供相同的 id:这在 HTML 中是无效的。 id-attributes 应该有唯一的值。但同样,很少需要为动态生成的元素分配 id。
- 在事件侦听器中,您可以使用事件对象来获取触发事件的元素。或者您可以在
this
中使用function
对象。但您也可以引用存在于所谓闭包中的node
变量。
function addTask() {
var node = document.createElement("LI");
node.textContent = document.getElementById("myTask").value;
var btn = document.createElement("button");
btn.textContent = "delete";
btn.addEventListener('click',() => node.remove());
node.appendChild(btn);
document.getElementById("myList").appendChild(node);
}
li > button { margin-left: 5px }
<input type="text" placeholder="Enter Task" onfocus="this.value=''" id="myTask">
<button onclick="addTask()">Add task</button>
<ol id="myList"></ol>