Javascript 删除<；李>；从待办事项清单？_Javascript_Html_Html Lists

Javascript 删除<；李>；从待办事项清单？

javascript html

Javascript 删除<；李>；从待办事项清单？,javascript,html,html-lists,Javascript,Html,Html Lists,如何在单击时从待办事项列表中删除列表项！我如何设置一个计数器来添加和显示我有多少任务以及删除一个任务后剩下多少任务 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Task 1</title> <link rel="stylesheet" href="styles.css" type="text/css"> &l

如何在单击时从待办事项列表中删除列表项！我如何设置一个计数器来添加和显示我有多少任务以及删除一个任务后剩下多少任务

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Task 1</title>
<link rel="stylesheet" href="styles.css" type="text/css">
<script src="script.js"></script>
</head>
<body>
<div id="container">
    <h1>My To Do List</h1>
    <input type="text" id="input_field" name="input_field" placeholder="Enter New Task" required>
    <button type="button" id="add" onclick="addtask()" > Add Task</button>
</div>
<ul id="todo_list"></ul>
</body>
</html>


任务1
我的任务清单
添加任务

JavaScript

function addtask() {
var input = document.getElementById('input_field').value;
    if (input == "") {
        window.alert("You must enter a value in the New Task field.");
    }
    else {
        var noteList = document.getElementById('todo_list');
        noteList.innerHTML += "<li>" + input + "<button id='delete'>clear</button></li>";
    }
}

函数addtask（）{
var input=document.getElementById（'input_field'）。值；
如果（输入==“”）{
警告（“您必须在新任务字段中输入一个值。”）；
}
否则{
var noteList=document.getElementById（'todo_list'）；
noteList.innerHTML+=“”+输入+“清除””；
}
}

在删除按钮的onClick事件中添加removeTask（）函数，并添加removeTask函数

像这样：

JS:

函数addtask（）{
var input=document.getElementById（'input_field'）。值；
如果（输入==“”）{
警告（“您必须在新任务字段中输入一个值。”）；
}否则{
var noteList=document.getElementById（'todo_list'）；
noteList.innerHTML+=“”+输入+“清除””；
countItems（）；
}
}
函数removeTask（）{
event.currentTarget.parentElement.remove（）；
countItems（）；
}
函数countItems（）{
var count=document.queryselectoral（“#todo_list>li”）.length；
document.getElementById（“count”）.innerHTML=count+“项”；
}

HTML:

  <div id="container">
    <h1 id="title">My To Do List</h1>
    <p id="count"></p>
    <input type="text" id="input_field" name="input_field" placeholder="Enter New Task" required>
    <button type="button" id="add" onclick="addtask()"> Add Task</button>
  </div>
  <ul id="todo_list"></ul>


我的任务清单

添加任务

我认为清单上的计数器是没有必要的。您可以始终在左侧待办事项列表的

待办事项列表中计算childNode
。但删除列表的计数器仍然有用
var list_now = document.getElementById('todo_list').childNodes.length;

添加一个onclick
事件以清除按钮，并调用删除该项的函数clearItem（）
关于你的第二个问题
我如何设置一个计数器来添加和显示我完成了多少任务
删除一个后，还有多少剩余
添加一个变量total\u added
，该变量在用户添加项目时递增，另一个变量remaining
在用户清除项目时递减

var-total\u added=0//将var初始化为零
剩余var=0//将var初始化为零
函数addtask（）{
var input=document.getElementById（'input_field'）。值；
如果（输入==“”）{
警告（“您必须在新任务字段中输入一个值。”）；
}
否则{
var noteList=document.getElementById（'todo_list'）；
noteList.innerHTML+=“”+输入+“清除””；
总计增加++；
剩余+++；//当用户添加项目时，增加的总添加量和剩余量
document.getElementById（'total_added'）。innerHTML=“total number of tasks added=“+total_added；
document.getElementById（‘剩余’）.innerHTML=“剩余任务数=”+剩余；
}
}
函数clearItem（）{
event.currentTarget.parentElement.remove（）；
剩余--；//用户清除项目时剩余的递减量
document.getElementById（‘剩余’）.innerHTML=“剩余任务数=”+剩余；
}

任务1
我的任务清单
添加任务

添加的任务总数=0
剩余任务数=0
看一看，它们也有一个普通的js实现。很好，非常感谢，但是有没有其他方法来删除项目，而不是使用“event.currentTarget.parentElement.remove（）；”？如果输出到div而不是li呢。感谢event.currentTarget.parentElement.remove（）
删除按钮所在的父标记，无论是li
还是div
ok。抱歉，还有一个问题，如果我没有按钮，想通过单击它来删除项目，在innerhtmlAddonclick='clearItem（）'
中单击按钮，而不是单击按钮，该怎么办。并更改event.currentTarget.parentElement.remove（）到事件.currentTarget.remove（）
由于您正在删除您单击的相同元素（即，）。谢谢，最后一个，如果我不删除项目，而是希望它看起来被划掉，该怎么办
var list_now = document.getElementById('todo_list').childNodes.length;