Невозможно вычеркнуть отдельные элементы из списка

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

Следующая демонстрация добавляет, проверяет, снимает флажки, удаляет одну и несколько задач и устанавливает указанные c задачи в качестве более приоритетных.

/**
* Render predefined tags in and around the given list tag (<ol> or <ul>), 
* and its children <li>. Also, class attributes are assigned throughout 
* the tags (new and old), and the list is registered to the "click"    
* event. When triggered by event the event handler function toDo() is
* called. All this is done in order to convert the static list into a 
* dynamic and interactive ToDo list. 
**
* @param  {String} selector - A CSS selector string of a pre-existing 
*                             <ul> or <ol>.
**
* function initList(selector) {...

Полнофункциональный пример можно просмотреть в Демо раздел. Вот до и после пример initList() результатов:

до

<ul class='list'>
  <li>Alpha</li>
  <li>Beta</li>
  <li>Gamma</li>
  <li>Delta</li>
</ul>

После

<header class='title'>
  <h1>To Do</h1> <a href='#/' id='all'>Remove Selected Tasks <b>❎</b></a>
</header>
<ul class='list'>
  <li><b class='status open'></b>Alpha<b class='status close'>❎</b></li>
  <li><b class='status open'></b>Beta<b class='status close'>❎</b></li>
  <li><b class='status open'></b>Gamma<b class='status close'>❎</b></li>
  <li><b class='status open'></b>Delta<b class='status close'>❎</b></li>
</ul>
<footer class='aux'>
  <b class='flag open'></b> <input id='text'> 
  <input id='add' type='button' value='Add'>
</footer>

---

• Для события "click" зарегистрировано еще два тега: a#all и footer.aux

• Обработчики событий:

  • a#all: function allSel(event) удаляет выбранные задачи (li.task.selected)
  • footer.aux: function addTask(event) добавляет новые задачи в перечислите и при необходимости назначьте любую задачу с более высоким приоритетом.
  • ul#list: function toDo(event) устанавливает список для отмены / проверки и удаления задач по одному.

---

Ссылки

• .insertAdjacentHTML()
• .querySelectorAll()
• for...of L oop
• .forEach()
• event.currentTarget
• event.target
• .matches()
• Делегирование мероприятия

---

Демонстрация

Краткое руководство

Удалить все выбранные задачи ❎
? ИЛИ ✅ Обычный приоритет ❎
? ИЛИ ☑️ Высокий приоритет ❎
? Текст нового задания Добавить

• Установите / снимите флажок с задачи в списке, щелкните значки в начале каждого задания: ?, ✅, ?, ☑️
• Удалить задачу из списка, щелкнуть значки в конце каждой задачи: 11
• * 1 138 * Удалить несколько задач из списка:
  1. Выберите задачи, щелкнув текст каждой из них: Обычный приоритет, Высокий приоритет
  2. Затем нажмите кнопку- ссылка в шапке: Удалить все выбранные задачи ❎
• Добавить задачу в список:
  1. Введите текст Задача в следующем поле: Текст нового задания
     
  2. Нажмите следующее (кнопка на самом деле зеленая): Добавить

• Добавьте задачу с высоким приоритетом в начало списка:

  1. Проверьте следующее: от ? до ☑️
     
  2. Введите текст задачи в следующем поле: Текст новой задачи
     
  3. Нажмите следующее (кнопка на самом деле зеленая): Добавить

---

function initList(selector) {
  const list = document.querySelector(selector);
  const head = `
  <header class='title'><h1>To Do</h1>
    <a href='#/' id='all'>Remove Selected Tasks <b>❎</b></a>
  </header>`;
  const foot = `
  <footer class='aux'><b class='flag open'></b>
    <input id='text'><input id='add' type='button' value='Add'>
  </footer>`;
  list.insertAdjacentHTML('beforebegin', head);
  list.insertAdjacentHTML('afterend', foot);

  const items = list.querySelectorAll('li');
  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);
}

initList('#list');

const all = document.querySelector('#all');
const aux = document.querySelector('.aux');
all.addEventListener('click', allSel);
aux.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.matches('.flag')) {
      clicked.classList.toggle('open');
      clicked.classList.toggle('done');
    }
    if (clicked.matches('.close')) {
      clicked.closest('.task').remove();
    }
  }
}

function allSel(event) {
  const clicked = event.target;

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

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

  if (clicked !== parent) {
    if (clicked.matches('.flag')) {
      clicked.classList.toggle('open');
      clicked.classList.toggle('done');
    }

    if (clicked.matches('#add')) {
      const list = document.querySelector('#list');
      const text = clicked.previousElementSibling;
      const priority = text.previousElementSibling;
      const task = priority.matches('.done') ? [`
    <li class='task'><b class='flag open'></b>
    &nbsp;${text.value}&nbsp;
    <b class='status close'>❎</b></li>`, 'afterbegin'] : [`
    <li class='task'><b class='status open'></b>
    &nbsp;${text.value}&nbsp;
    <b class='status close'>❎</b></li>`, 'beforeend'];
      list.insertAdjacentHTML(task[1], task[0]);
      priority.classList.add('open');
      priority.classList.remove('done');
    }
  }
}

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

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

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

h1 {
  font-size: 1.75rem;
}

#all,
#all:link,
#all:visited {
  font-size: 1rem;
  text-align: right;
  color: #999;
}

#all:hover,
#all:active {
  color: #000;
}

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

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

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

b {
  cursor: pointer;
}

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

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

.close {
  float: right
}

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

.aux .flag,
.aux input {
  display: table-cell;
  font: inherit;
  font-size: 1.25rem;
}

.aux .flag {
  width: 5%;
  padding-left: 25px;
}

.flag.open::before {
  content: '? ';
}

.flag.done::before {
  content: '\002611\00fe0f';
}

#text {
  width: 88%;
}

#add {
  width: 10%;
  padding: 2px 5px;
  border: 1px solid #000;
  background: #16C60C;
  color: #fff;
  cursor: pointer;
}

<main class="container">
  <section class="row">
    <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>
  </section>
</main>

Answer 2

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

Эта строка выбирает первое вхождение тега li во всем документе.

Вы уже получаете событие e в обработчике addEventListener и проверяете цель. Измените свой код, чтобы добавить класс к 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>

Также можно удалить неиспользуемые селекторы.