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

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 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();
});

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

与]相同>

const li = document.querySelector('li');
因此，如果其他事情正确，您应该可以删除第一个待办事项列表项。如果要删除每个元素并创建新元素，则有点复杂。

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

const cross = document.querySelector('.cross');
这将返回所有li元素，但不返回新元素。因此，您需要做的是将事件监听器添加到ul的事件委托。并使用const li = document.querySelectorAll('li');
检查您单击的内容，可以使用e.target并检查元素具有的类的类型o

如果使用e.target.classList，则可以得到实际的li元素。