我如何删除 使用香草javascript的点击？

Question

我在查找用于删除元素的正确语法时遇到麻烦。我有一个列表项，该列表项是使用表单生成的，当我单击该表单项时也希望将其删除。这是我当前的JavaScript代码：

// add to do items
let todoList = [];

function addTodo(item){
  todoList.push(item);
  //display item
}

const addButton = document.querySelector('.btn__display');
const formInput = document.querySelector('.addItem');
const listItems = document.querySelectorAll('li');

addButton.addEventListener('click', function(){
  const todoUl = document.querySelector('ul');
  const todoLi = document.createElement('li');
  todoLi.textContent = formInput.value;
  todoList.push(formInput.value);
  todoUl.appendChild(todoLi);
  formInput.value = '';
});

到目前为止，我可以将一个项目添加到我的待办事项列表中，但是如何单击删除它？

Answer 1

您可以向新创建的li元素添加onclick侦听器，以在单击时将其删除：

todoLi.onclick = (e) => e.target.remove();

// add to do items
let todoList = [];

function addTodo(item) {
  todoList.push(item);
  //display item
}

const addButton = document.querySelector('.btn__display');
const formInput = document.querySelector('.addItem');
const listItems = document.querySelectorAll('li');

addButton.addEventListener('click', function() {
  const todoUl = document.querySelector('ul');
  const todoLi = document.createElement('li');
  todoLi.textContent = formInput.value;
  todoLi.onclick = (e) => e.target.remove();
  todoList.push(formInput.value);
  todoUl.appendChild(todoLi);
  formInput.value = '';
});

<button class="btn__display">btn__display</button>
<input type="text" class="addItem">
<ul></ul>