文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >为列表中的每一项实现删除按钮(Javascript)

问为列表中的每一项实现删除按钮(Javascript)
EN

Stack Overflow用户
提问于 2018-07-05 03:39:40
回答 3查看 1.7K关注 0票数 0

嗨，作为练习的一部分，我必须创建一个带有以下实现的待办事项列表。当我单击TODO按钮时，会出现一个提示框，我在其中键入我想要的目标，然后将其添加到列表中，并将项目计数设置为列表中的项目数量。

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

不幸的是，我的删除按钮似乎不起作用。当我单击它时，它会删除列表中的第一个项目，而不是删除选定的项目。我还是不知道为什么。有人能提供正确的代码来修复这个问题吗？谢谢。

​

代码语言：javascript
复制
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;

}
代码语言：javascript
复制
* {
  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;
}
代码语言：javascript
复制
<!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
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-07-05 03:49:03

这将会起作用。只需通过onclick处理程序传递要删除的li元素，并从ul元素中删除它。

​

代码语言：javascript
复制
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);

}
代码语言：javascript
复制
* {
  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;
}
代码语言：javascript
复制
<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>

​

票数 0
EN

Stack Overflow用户

发布于 2018-07-05 03:57:54

我认为您在构建新列表li的代码行中有一些语法错误，只是放置了引号。我认为它应该是这样的，这样变量clicks实际上被设置为id和值，而不是单词'clicks‘。

代码语言：javascript
复制
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>"
票数 0
EN

Stack Overflow用户

发布于 2018-07-05 04:00:21

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

代码语言：javascript
复制
... value = " + (clicks-1) ...
//We use (clicks - 1) because the array is 0 based but clicks was previously incremented.

​

代码语言：javascript
复制
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;

}
代码语言：javascript
复制
* {
  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;
}
代码语言：javascript
复制
<!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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/51179985

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档