如果在 JavaScript 中单击子项，则删除父项

问题描述

我在创建 TodoApp 时遇到了问题

如果我点击图标应该删除图标所在的位置。 我不能写一个函数，它上升到 span 然后到 li 并删除它。

const input = document.querySelector('input');
const list = document.querySelector('ul');
const reset = document.querySelector('.reset');

const addTask = (e) => {
  if (e.keyCode === 13 && input.value.length != 0) {
    let value = input.value;
    const li = document.createElement('li');
    const span = document.createElement('span');
    const icon = document.createElement('i');
    icon.classList.add('material-icons');
    icon.textContent = "highlight_off";
    span.appendChild(icon);
    li.textContent = value;
    // span.setAttribute("onclick",`deleteTask()`);
    list.appendChild(li);
    li.appendChild(span);
    input.value = "";
  }
}

const deleteTask = (e) => {
  const element = e.target;
  console.log(element);
  element.currentTarget.parentNode.remove();
}

input.addEventListener('keydown',addTask);
list.addEventListener('click',deleteTask)

<div class="container">
  <input type="text" placeholder="Type text and click 'enter'">
  <ul>
    // Here is created li
  </ul>
  <button class="reset">CLEAR</button>
</div>

解决方法

使用最近的

const input = document.querySelector('input');
const list = document.querySelector('ul');
const reset = document.querySelector('.reset');

const addTask = (e) => {
  if (e.keyCode === 13 && input.value.length != 0) {
    let value = input.value;
    const li = document.createElement('li');
    const span = document.createElement('span');
    const icon = document.createElement('i');
    icon.classList.add('material-icons');
    icon.textContent = "highlight_off";
    span.appendChild(icon);
    li.textContent = value;
    // span.setAttribute("onclick",`deleteTask()`);
    list.appendChild(li);
    li.appendChild(span);
    input.value = "";
  }
}

const deleteTask = (e) => {
  const element = e.target.closest("li");
  console.log(element);
  element.remove();
}

input.addEventListener('keydown',addTask);
list.addEventListener('click',deleteTask)

<div class="container">
  <input type="text" placeholder="Type text and click 'enter'">
  <ul>
    // Here is created li
  </ul>
  <button class="reset">CLEAR</button>
</div>