无法单独从列表中删除项目

Question

我一直在尝试构建待办事项列表应用程序，当我尝试单击列表中的任何位置时，总是第一个项目从列表中划掉，而不是被单击的项目。和以下CSS代码中应用CSS样式的最佳方法是什么？我已经在下面发布了代码。

const container = document.querySelector('.container');
const list = document.querySelector('#list');

const textBox = document.querySelector('#textBox');
const submit = document.querySelector('#submit');
const data = document.querySelector('.data');
const close = document.querySelector('.close');

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

list.addEventListener('click', function (e) {
  if (e.target ) {
    li.classList.add('task');
  }
});

<div class="container">
  <h1>To Do</h1>
  <div class="data">
    <ul id="list">
      <li>Meet Denise<span class="close"></span></li>
      <li><span class="check"></span>Grocery</li>
      <li>Book Appointment</li>
      <li>Watch GOT</li>
      <li>Book Flight</li>
      <li>Buy Ipad</li>
      <li>Pick up kids</li>
      <li>Complete Homework</li>
    </ul>
  </div>

Answer 1

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

此行选择li标签在整个文档中的首次出现。

您通常在addEventListener处理程序中获取事件e，并检查目标。更改您的代码以将类添加到e.target：

const list = document.querySelector('#list');

list.addEventListener('click', function (e) {
  if (e.target) {
    e.target.classList.add('task')
  }
})

.task {
  text-decoration: line-through;
}

<div class="container">
  <h1>To Do</h1>
  <div class="data">
    <ul id="list">
      <li>Meet Denise</li>
      <li>Grocery</li>
      <li>Book Appointment</li>
      <li>Watch GOT</li>
      <li>Book Flight</li>
      <li>Buy Ipad</li>
      <li>Pick up kids</li>
      <li>Complete Homework</li>
    </ul>
  </div>

也可以删除未使用的选择器。

Answer 2

以下演示添加，删除，检查，取消选中和删除多个任务。即将添加详细信息。

const list = document.querySelector('#list');
const items = list.querySelectorAll('li');
const all = document.querySelector('#all');
const add = document.querySelector('#add');

for (let item of items) {
  const open = `<b class='status open'></b> `;
  const close = ` <b class='status close'>❎</b>`;
  item.insertAdjacentHTML('afterbegin', open);
  item.insertAdjacentHTML('beforeend', close);
  item.classList.add('task');
}

list.addEventListener('click', toDo);
all.addEventListener('click', allSelected);
add.addEventListener('click', addTask);

function toDo(event) {
  const parent = event.currentTarget;
  const clicked = event.target;

  if (clicked !== parent) {
    if (clicked.matches('.task')) {
      clicked.classList.toggle('selected');
    }
    if (clicked.matches('.status')) {
      clicked.classList.toggle('open');
      clicked.classList.toggle('done');
    }
    if (clicked.matches('.close')) {
      clicked.closest('.task').remove();
    }
  }
}

function allSelected(event) {
  const clicked = event.target;
  if (clicked.matches('#all')) {
    let marked = document.querySelectorAll('.selected');
    marked.forEach(task => task.remove());
  }
}

function addTask(event) {
  const clicked = event.target;
  if (clicked.matches('#add')) {
    const text = clicked.previousElementSibling;
    const task = `
    <li class='task'><b class='open'></b>
      ${text.value}
    <b class='close'>❎</b></li>`;
    document.querySelector('#list').insertAdjacentHTML('beforeend', task);
  }
}

:root,
body {
  font: 400 4vh/1.5 Verdana
}

.title {
  display: table;
  width: 100%;
}

h1,
#all {
  display: table-cell;
}

#all {
  text-align: right;
}

#list {
  list-style: none;
  margin-left: -15px;
}

li,
a {
  font-size: 1.25rem;
}

li:hover,
li.selected {
  background: rgba(24, 228, 42, 0.3);
}

li b {
  cursor: pointer;
}

.open::before {
  content: '🟩 '
}

.done::before {
  content: '✅ '
}

.close {
  float: right
}

.aux {
  display: table;
  table-layout: fixed;
  width: 100%;
}

input {
  display: table-cell;
  font: inherit;
  font-size: 1.25rem;
}

#text {
  margin-left: 30px;
  width: 80%;
}

<main class="container">
  <section class="data">
    <header class='title'>
      <h1>To Do</h1>
      <a href='#/' id='all'>❎</a>
    </header>
    <ul id="list">
      <li>Meet Denise</li>
      <li>Grocery</li>
      <li>Book Appointment</li>
      <li>Watch GOT</li>
      <li>Book Flight</li>
      <li>Buy Ipad</li>
      <li>Pick up kids</li>
      <li>Complete Homework</li>
    </ul>
    <footer class='aux'>
      <input id='text'><input id='add' type='button' value='Add'>
    </footer>
  </section>
</main>