为列表中的每个项目实现删除按钮（Javascript）

【问题标题】：Implementing Delete Button For Each Item In List (Javascript)为列表中的每个项目实现删除按钮（Javascript）
【发布时间】：2018-07-04 19:39:39
【问题描述】：

您好，作为练习的一部分，我必须使用以下实现创建一个待办事项列表。 当我单击 TODO 按钮时，会出现一个提示框，我在其中输入我想到的目标，然后它会被添加到列表中，并且项目计数设置为列表中有多少项目。

该列表还为每个项目提供了一个删除按钮和一个检查按钮。检查按钮用于确定目标是否已完成，删除按钮用于删除特定目标。

很遗憾，我的删除按钮似乎不起作用。当我单击它时，它不会删除所选项目，而是删除列表中的第一个项目。我仍然不确定为什么。谁能提供正确的代码来解决这个问题？谢谢。

const classNames = {
  TODO_ITEM: 'todo-container',
  TODO_CHECKBOX: 'todo-checkbox',
  TODO_TEXT: 'todo-text',
  TODO_DELETE: 'todo-delete',
}

const list = document.getElementById('todo-list')
const itemCountSpan = document.getElementById('item-count')
const uncheckedCountSpan = document.getElementById('unchecked-count')

//This function creates a new list element
function newTodo() {
  var clicks = document.getElementsByTagName("input").length;
  var item = prompt("Please enter a goal", " ")
  if(item == null){
    return cheese
  }
  clicks ++;
  itemCountSpan.innerHTML = clicks;
  list.innerHTML = list.innerHTML + "<li id = 'clicks'> <input type = checkbox onclick = 'checker()' class = 'todo-checkbox'>Goal: " + item +
  "</input>" + "<button class = 'todo-delete' value = clicks onclick = 'deleteToDo(this.value)'>Delete</button></li>"

}
//This function sets the unchecked count
function checker(){
    var Total = 0;
    for (var i = 0; i < document.getElementsByTagName("input").length; i++){
      if (!document.getElementsByTagName("input")[i].checked){
        Total ++;
        uncheckedCountSpan.innerHTML = Total;
      }
  }
}
//This function deletes a list element selected
function deleteToDo(sel_id){

  list.removeChild(document.getElementsByTagName("li")[sel_id]);
  var clicks = document.getElementsByTagName("input").length;
  itemCountSpan.innerHTML = clicks;

}
* {
  box-sizing: border-box;
}

html, body {
  background-color: #eee;
  margin: 0;
  padding: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.center {
  align-self: center;
}

.flow-right {
  display: flex;
  justify-content: space-around;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  background-color: white;
  height: 100vh;
}

.title, .controls, .button {
  flex: none;
}

.button {
  padding: 10px 20px;
}

.todo-list {
  flex: 1 1 0;
  margin-top: 20px;
  padding: 20px;
  overflow-y: auto;
}

.todo-delete {
  margin: 10px;
}

.todo-checkbox {
  margin: 10px;
}

.todo-container {
  padding: 20px;
  border-bottom: 1px solid #333;
}

.todo-container:first-of-type {
  border-top: 1px solid #333;
}
<!DOCTYPE html>
<html>
  <head>
    <title>TODO App</title>
    <link rel="stylesheet" type="text/css" href="./styles.css" />
  </head>
  <body>
    <div class="container center">
      <h1 class="center title">My TODO App</h1>
      <div class="flow-right controls">
        <span>Item count: <span id="item-count">0</span></span>
        <span>Unchecked count: <span id="unchecked-count">0</span></span>
      </div>
      <button class="button center" onClick="newTodo(); checker()">New TODO</button>
      <ul id="todo-list" class="todo-list"></ul>
    </div>
    <script src="./script.js"></script>
  </body>
</html>

【问题讨论】：

    标签： javascript html list


    【解决方案1】：

    这会奏效。只需通过onclick 处理程序传递要删除的li 元素，然后将其从ul 元素中删除。

    const classNames = {
  TODO_ITEM: 'todo-container',
  TODO_CHECKBOX: 'todo-checkbox',
  TODO_TEXT: 'todo-text',
  TODO_DELETE: 'todo-delete',
}

const list = document.getElementById('todo-list')
const itemCountSpan = document.getElementById('item-count')
const uncheckedCountSpan = document.getElementById('unchecked-count')

//This function creates a new list element
function newTodo() {
  var clicks = document.getElementsByTagName("input").length;
  var item = prompt("Please enter a goal", " ")
  if(item == null){
    return cheese
  }
  clicks ++;
  itemCountSpan.innerHTML = clicks;
  list.innerHTML = list.innerHTML + "<li id = 'clicks'> <input type = checkbox onclick = 'checker()' class = 'todo-checkbox'>Goal: " + item +
  "</input>" + "<button class = 'todo-delete' value = clicks onclick = 'deleteToDo(this.parentElement)'>Delete</button></li>"

}
//This function sets the unchecked count
function checker(){
    var Total = 0;
    for (var i = 0; i < document.getElementsByTagName("input").length; i++){
      if (!document.getElementsByTagName("input")[i].checked){
        Total ++;
        uncheckedCountSpan.innerHTML = Total;
      }
  }
}
//This function deletes a list element selected
function deleteToDo(elem){

  list.removeChild(elem);

}
    * {
  box-sizing: border-box;
}

html, body {
  background-color: #eee;
  margin: 0;
  padding: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.center {
  align-self: center;
}

.flow-right {
  display: flex;
  justify-content: space-around;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  background-color: white;
  height: 100vh;
}

.title, .controls, .button {
  flex: none;
}

.button {
  padding: 10px 20px;
}

.todo-list {
  flex: 1 1 0;
  margin-top: 20px;
  padding: 20px;
  overflow-y: auto;
}

.todo-delete {
  margin: 10px;
}

.todo-checkbox {
  margin: 10px;
}

.todo-container {
  padding: 20px;
  border-bottom: 1px solid #333;
}

.todo-container:first-of-type {
  border-top: 1px solid #333;
}
    <div class="container center">
      <h1 class="center title">My TODO App</h1>
      <div class="flow-right controls">
        <span>Item count: <span id="item-count">0</span></span>
        <span>Unchecked count: <span id="unchecked-count">0</span></span>
      </div>
      <button class="button center" onClick="newTodo(); checker()">New TODO</button>
      <ul id="todo-list" class="todo-list"></ul>
    </div>

    【讨论】：

      【解决方案2】：

      value 需要设置为该函数中的实际变量。所以我所做的就是：

      ... value = " + (clicks-1) ...
//We use (clicks - 1) because the array is 0 based but clicks was previously incremented.


      const classNames = {
  TODO_ITEM: 'todo-container',
  TODO_CHECKBOX: 'todo-checkbox',
  TODO_TEXT: 'todo-text',
  TODO_DELETE: 'todo-delete',
}

const list = document.getElementById('todo-list')
const itemCountSpan = document.getElementById('item-count')
const uncheckedCountSpan = document.getElementById('unchecked-count')

//This function creates a new list element
function newTodo() {
  var clicks = document.getElementsByTagName("input").length;
  var item = prompt("Please enter a goal", " ")
  if(item == null){
    return cheese
  }
  clicks++;
  itemCountSpan.innerHTML = clicks;
  list.innerHTML = list.innerHTML + "<li id = 'clicks'> <input type = checkbox onclick = 'checker()' class = 'todo-checkbox'>Goal: " + item +
  "</input>" + "<button class = 'todo-delete' value = " + (clicks-1) + " onclick = 'deleteToDo(this.value)'>Delete</button></li>"

}
//This function sets the unchecked count
function checker(){
    var Total = 0;
    for (var i = 0; i < document.getElementsByTagName("input").length; i++){
      if (!document.getElementsByTagName("input")[i].checked){
        Total ++;
        uncheckedCountSpan.innerHTML = Total;
      }
  }
}
//This function deletes a list element selected
function deleteToDo(sel_id){
  list.removeChild(document.getElementsByTagName("li")[sel_id]);
  var clicks = document.getElementsByTagName("input").length;
  itemCountSpan.innerHTML = clicks;

}
      * {
  box-sizing: border-box;
}

html, body {
  background-color: #eee;
  margin: 0;
  padding: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.center {
  align-self: center;
}

.flow-right {
  display: flex;
  justify-content: space-around;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  background-color: white;
  height: 100vh;
}

.title, .controls, .button {
  flex: none;
}

.button {
  padding: 10px 20px;
}

.todo-list {
  flex: 1 1 0;
  margin-top: 20px;
  padding: 20px;
  overflow-y: auto;
}

.todo-delete {
  margin: 10px;
}

.todo-checkbox {
  margin: 10px;
}

.todo-container {
  padding: 20px;
  border-bottom: 1px solid #333;
}

.todo-container:first-of-type {
  border-top: 1px solid #333;
}
      <!DOCTYPE html>
<html>
  <head>
    <title>TODO App</title>
    <link rel="stylesheet" type="text/css" href="./styles.css" />
  </head>
  <body>
    <div class="container center">
      <h1 class="center title">My TODO App</h1>
      <div class="flow-right controls">
        <span>Item count: <span id="item-count">0</span></span>
        <span>Unchecked count: <span id="unchecked-count">0</span></span>
      </div>
      <button class="button center" onClick="newTodo(); checker()">New TODO</button>
      <ul id="todo-list" class="todo-list"></ul>
    </div>
    <script src="./script.js"></script>
  </body>
</html>

      【讨论】：

        【解决方案3】：

        我认为您在构建新列表 li 的行中存在一些语法错误，只是引号的位置。我认为应该是这样，以便变量 clicks 实际上设置为 id 和 value 而不是单词“clicks”。

        list.innerHTML = list.innerHTML + "<li id = '" + clicks + "'> <input type = 'checkbox' onclick = 'checker()' class = 'todo-checkbox'>Goal: " + item +
  "</input>" + "<button class = 'todo-delete' value = '" + clicks + "' onclick = 'deleteToDo(this.parentElement)'>Delete</button></li>"

        【讨论】：

          猜你喜欢
          • 2018-06-06
          • 1970-01-01
          • 2016-12-09
          • 1970-01-01
          • 2014-03-11
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多
          热门标签
          Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode