CodePen

Question

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

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>

的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>";
    }
}

Answer 1

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

像这样：

JS：

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'  onclick='removeTask()' >clear</button></li>";
    countItems();

  }
}

function removeTask() {
  event.currentTarget.parentElement.remove();
  countItems();
}

function countItems() {
  var count = document.querySelectorAll("#todo_list > li").length;
  document.getElementById("count").innerHTML = count + ' item(s)';

}

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>

CodePen

Answer 2

我认为列表的反驳是不必要的。您可以随时在childNode中为左边的待办事项列表计算todo_list。但是删除列表的计数器仍然有用。

var list_now = document.getElementById('todo_list').childNodes.length;

Answer 3

添加onclick事件以清除按钮并调用删除该项目的函数clearItem()。

关于第二个问题，

我将如何设置一个计数器来添加和显示我的任务数量有一个被删除后剩下多少。

添加一个变量total_added，该变量在用户添加项目时递增，另一个变量remaining在用户清除项目时decrement。

＆＃13;

var total_added = 0;  //initialize the var to zero
var remaining = 0;    //initialize the var to zero

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' onclick='clearItem()'>clear</button></li>";
    
    total_added++;
    remaining++;    //increment total_added and remaining when user adds an item
    
    document.getElementById('total_added').innerHTML = "Total number of tasks added = " + total_added;
    
  document.getElementById('remaining').innerHTML = "Number of tasks remaining = " + remaining;
  }
}

function clearItem() {
  event.currentTarget.parentElement.remove();
  
  remaining--;  //decrement remaining when user clears an item
  
  document.getElementById('remaining').innerHTML = "Number of tasks remaining = " + remaining;
}

＆＃13;

<!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>
  <p id="total_added">Total number of tasks added = 0</p>
  <p id="remaining">Number of tasks remaining = 0</p>
</body>
</html>

＆＃13;

从列表中删除<li>？

3 个答案:

CodePen