Question

当我点击“ X”时，我无法从待办事项列表中删除列表项，花了一个星期的时间尝试不同的东西。每当我出于某种原因单击“ X”时，复选标记都会被删除。如果您能提供解决方案的说明，那就太好了。

谢谢


<div class="container">
          <h1>To Do</h1>
          <div class="data">
            <ul id="list">
              <li class="check"><span>&#9989</span></li>
              <li class="cross"><span>&#10062</span></li>
            </ul>
          </div>
          <div class="add">
            <input id="textBox" type="text" placeholder="Add task here" />
            <button id="submit" type="submit">Add task</button>
          </div>
        </div>




const textBox = document.querySelector('#textBox');
const submit = document.querySelector('#submit');
const li = document.querySelector('li');
const list = document.querySelector('#list');
const cross = document.querySelector('.cross');

// remove an item off the list
function removeItem() {
  li.remove(list);
}
// displays text on screen
function displayText() {
  let newListItem = document.createElement('li');

  newListItem.textContent = textBox.value;

  list
    .appendChild(newListItem)
    .insertAdjacentHTML('beforeend', '<span>&#10062</span>');
  list.className = cross;
}

// clears the input after button clicked
function clearField() {
  textBox.value = '';
}

// event listener for the add button
submit.addEventListener('click', (e) => {
  e.preventDefault();
  displayText();
  clearField();
});

// event listener for remove button
cross.addEventListener('click', (e) => {
  e.preventDefault();
  removeItem();
});

Answer 1

所以你有那些错误：

const li = document.querySelector('li');

这将从您的html中选择第一个li。

与

相同

const cross = document.querySelector('.cross');

因此，如果其他事情正确，您应该可以删除第一个待办事项列表项。如果要删除每个元素并创建新元素，则需要做更多的工作。

抱歉，这不是确切答案，但是在开始创建应用之前，您应该了解有关JavaScript和DOM的更多信息。会给你一些提示：

const li = document.querySelectorAll('li');

这将返回所有li元素，但不返回新元素。因此，您需要做的是所谓的事件委托，将事件侦听器添加到ul元素，然后使用e.target检查您实际单击的内容，可以使用e.target.classList并检查哪种类型的事件元素具有的类或使用其他DOM特定字段（例如标签名称等）。您可以在MDN中了解它们。

，如果您使用e.target.closest('li').remove()，则可以获取实际的li元素。

待办事项//无法删除列表项

1 个答案: