Question

我创建了一个待办事项列表，其中包含一些预定义的待办事项列表项，并且还可以通过提示命令在列表内设置自己的待办事项。这段代码的问题是，当我尝试删除自己创建的项目时，无法执行。虽然我可以删除预定义的项目。这是代码：

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>

Answer 1

您没有做错任何事情，只是没有编写代码来删除任何TODO。

我将为您描述它，但是您将需要对其进行研究并编写代码。

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

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

然后在删除代码中，从用户输入中删除空格，然后查找以该元素为id的元素。

请勿进行大量的if屏蔽。只需按ID查找元素，然后如果有one that matches，将其删除。如果没有，请发出警报以告知用户找不到它。

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

Answer 2

要删除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>

Answer 3

您不是动态地进行操作，我要做的是全部获取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>

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

3 个答案: