如何使用<li>原版 javascript 删除点击？

Question

我很难找到删除元素的正确语法。我有一个列表项，我用一个表单生成，我想在点击它时也删除它

// 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>

Answer 2

与Luis的答案类似，您可以执行以下操作：

// 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');
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 = '';
todoLi.addEventListener('click', function () {
this.remove();
});
});

不同之处在于，我们添加了一个带有函数的事件侦听器，其中this将被设置为列表项。

https://jsfiddle.net/gy9cLum3/

Answer 3

尝试使用以下代码：

<ul>
<li onclick="remove(this)">lorem</li>
</ul>
<script>function remove(elem) { elem.parentElemet.removeChild(elem); } </script>