无法从待办事项列表中删除自定义待办事项列表项答案

【问题标题】：can't delete custom todo list item from todo list无法从待办事项列表中删除自定义待办事项列表项
【发布时间】：2020-06-06 17:30:57
【问题描述】：

我用一些预定义的待办事项列表项制作了一个待办事项列表，并且我还可以通过提示命令在列表中设置您自己的待办事项。我对这段代码的问题是，当我尝试删除我创建的项目时，我做不到。虽然我可以删除预定义的项目。代码如下：

let addTodo = document.getElementById('add');
let delTodo = document.getElementById('delete');
let ul = document.querySelector('ul');
let li = document.querySelectorAll('li');

addTodo.addEventListener('click', () => {
  let add = prompt('Add a new todo');

  if (add.length >= 1) {
    let newLi = document.createElement('li');
    let newLiText = document.createTextNode = add;
    newLi.append(newLiText);
    ul.appendChild(newLi);
  } else {
    alert('An error has occurred. Please try again.');
  }
});

delTodo.addEventListener('click', () => {
  let deleteTodo = prompt('Which todo do you want to delete?');
  let firstTodo = document.querySelector('#first');
  let secondTodo = document.querySelector('#second');
  let thirdTodo = document.querySelector('#third');

  if (deleteTodo === 'Study') {
    ul.removeChild(firstTodo);
  } else if (deleteTodo === 'Eat') {
    ul.removeChild(secondTodo);
  } else if (deleteTodo === 'Watch') {
    thirdTodo.style.display = 'none';
  } else {
    alert('error occurrred');
  }
});

body {
  margin: 0;
  padding: 0;
  background-color: coral;
  font-family: 'Playfair Display', cursive;
  letter-spacing: 0.1em;
  color: firebrick;
}

.wrapper {
  margin: 10px auto;
  border: 3px solid firebrick;
  max-width: 300px;
  text-align: center;
}

.table {
  margin: 20px auto;
  padding: 10px;
}

.table ul {
  list-style-type: none;
}

.table li {
  text-align: left;
  margin: 20px 0px 20px -40px;
  border: 1px solid red;
  padding: 10px;
}

.table h3 {
  text-align: left;
}

button {
  margin: 10px 10px;
  padding: 5px;
  font-family: 'Playfair Display';
  background-color: coral;
  color: firebrick;
  border: 2px solid firebrick;
}

<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Playfair+Display&display=swap" rel="stylesheet">
</head>

<body>
  <div class="wrapper">
    <h1>Todo List</h1>
    <div class="table">
      <h3>List the todos here</h3>
      <ul>
        <li id="first">Study Math</li>
        <li id="second">Eat Breakfast</li>
        <li id="third">Watch a Movie</li>
      </ul>
    </div>
    <button id="add">Add new todo</button>
    <button id="delete">Delete todo</button>
  </div>
  <script src="sandbox.js"></script>
</body>

</html>

【问题讨论】：

您显示的 html 显然只处理 3 个预设选项。您是否尝试过让删除点击处理程序找到所有 <li> 元素，而不是仅对这些元素进行硬编码？

标签： javascript

【解决方案1】：

你没有做错任何事，你只是没有编写删除任何 TODO 的代码。

我会为你描述它，但你需要研究它并编写代码。

添加新 TODO 时，需要set the id attribute on it。

您可能希望将用户提供的 TODO 名称与spaces stripped out 一起使用。

然后在您的删除代码中，您将用户输入中的空格去掉，并寻找一个将其作为id 的元素。

不要做大量的if 块。只需通过 id 查找元素，如果有one that matches，则将其删除。如果没有，发出警报告诉用户它没有找到。

对于下一个级别，在创建 TODO 时将“__todo-”放在 id 前面，并在页面上显示一个下拉框以删除它们，否则（更好的 UX），在TODO 允许用户删除它。

【讨论】：

【解决方案2】：

你不是动态做的，我要做的是获取所有li并找到一个包含用户在提示中输入的文本的文本，然后删除该元素。

let addTodo = document.getElementById('add');
let delTodo = document.getElementById('delete');
let ul = document.querySelector('ul');
let li = document.querySelectorAll('li');

addTodo.addEventListener('click', () => {
  let add = prompt('Add a new todo');

  if (add.length >= 1) {
    let newLi = document.createElement('li');
    let newLiText = document.createTextNode = add;
    newLi.append(newLiText);
    ul.appendChild(newLi);
  } else {
    alert('An error has occurred. Please try again.');
  }
});

delTodo.addEventListener('click', () => {
  let deleteTodo = prompt('Which todo do you want to delete?');
  const listItems = document.querySelectorAll('li');
  let listItemToRemove = null;
  for (let li of listItems) {
     if (li.innerText === deleteTodo) {
        listItemToRemove = li;
     }
  }
  if (listItemToRemove) {
    listItemToRemove.remove();
  }
});

body {
  margin: 0;
  padding: 0;
  background-color: coral;
  font-family: 'Playfair Display', cursive;
  letter-spacing: 0.1em;
  color: firebrick;
}

.wrapper {
  margin: 10px auto;
  border: 3px solid firebrick;
  max-width: 300px;
  text-align: center;
}

.table {
  margin: 20px auto;
  padding: 10px;
}

.table ul {
  list-style-type: none;
}

.table li {
  text-align: left;
  margin: 20px 0px 20px -40px;
  border: 1px solid red;
  padding: 10px;
}

.table h3 {
  text-align: left;
}

button {
  margin: 10px 10px;
  padding: 5px;
  font-family: 'Playfair Display';
  background-color: coral;
  color: firebrick;
  border: 2px solid firebrick;
}

<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Playfair+Display&display=swap" rel="stylesheet">
</head>

<body>
  <div class="wrapper">
    <h1>Todo List</h1>
    <div class="table">
      <h3>List the todos here</h3>
      <ul>
        <li id="first">Study Math</li>
        <li id="second">Eat Breakfast</li>
        <li id="third">Watch a Movie</li>
      </ul>
    </div>
    <button id="add">Add new todo</button>
    <button id="delete">Delete todo</button>
  </div>
  <script src="sandbox.js"></script>
</body>

</html>

【讨论】：

运行良好，谢谢。顺便问一个问题。我可以使用值 0 代替您为 listItemToRemove 常量设置的空值吗？因为结果相同，所以列表项被删除。

【解决方案3】：

要删除todo，您必须先识别它。为此，将 id 属性添加到 li 元素。

如果两个 todos 名称相同，则以下解决方案可能会失败，因为您的 ID 必须是唯一的。

为此，您必须找到一种方法来唯一标识一个元素 (li)，同时动态创建它。

let addTodo = document.getElementById('add');
let delTodo = document.getElementById('delete');
let ul = document.querySelector('ul');
let li = document.querySelectorAll('li');

addTodo.addEventListener('click', () => {
  let add = prompt('Add a new todo');

  if (add && add.length >= 1) {
    let newLi = document.createElement('li');
    newLi.id = add.trim();
    let newLiText = document.createTextNode(add);
    newLi.append(newLiText);
    ul.appendChild(newLi);
  } else {
    alert('TODO name cannot be empty');
  }
});

delTodo.addEventListener('click', () => {
  let deleteTodo = prompt('Which todo do you want to delete?');

  let toDeleteId = deleteTodo.toLowerCase().trim();
  let toDeleteNode = document.querySelector(`#${toDeleteId}`);
  if (toDeleteNode) {
    ul.removeChild(toDeleteNode)
  } else {
    alert("TODO not found")
  }

});

body {
  margin: 0;
  padding: 0;
  background-color: coral;
  font-family: 'Playfair Display', cursive;
  letter-spacing: 0.1em;
  color: firebrick;
}

.wrapper {
  margin: 10px auto;
  border: 3px solid firebrick;
  max-width: 300px;
  text-align: center;
}

.table {
  margin: 20px auto;
  padding: 10px;
}

.table ul {
  list-style-type: none;
}

.table li {
  text-align: left;
  margin: 20px 0px 20px -40px;
  border: 1px solid red;
  padding: 10px;
}

.table h3 {
  text-align: left;
}

button {
  margin: 10px 10px;
  padding: 5px;
  font-family: 'Playfair Display';
  background-color: coral;
  color: firebrick;
  border: 2px solid firebrick;
}

<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Playfair+Display&display=swap" rel="stylesheet">
</head>

<body>
  <div class="wrapper">
    <h1>Todo List</h1>
    <div class="table">
      <h3>List the todos here</h3>
      <ul>
        <li id="first">Study Math</li>
        <li id="second">Eat Breakfast</li>
        <li id="third">Watch a Movie</li>
      </ul>
    </div>
    <button id="add">Add new todo</button>
    <button id="delete">Delete todo</button>
  </div>
</body>

</html>

【讨论】：