如何删除一个特定的<li>来自 html 的元素使用基本 javascript？</li>

Question

我正在尝试列一个待办事项清单。

我已经设法使新任务显示为无序列表中的列表元素<li> （每个元素旁边都有一个按钮，我想用它来删除这个特定元素。问题是，我不知道该怎么做那。我读过有关 removeChild() 的内容，但它似乎只适用于第一个或最后一个元素。

let addTaskToTheList = () => {
let task = document.getElementById("task_input_field").value;
let list = document.getElementById("to-do_list");
    list.innerHTML += `<li>${task}</li><button type="button"onclick="deleteTask()">X</button>`
}

Answer 1

Select 使用event.currentTarget.closest("li")的正确li元素并将其从选择器中删除。

工作小提琴

 let addTaskToTheList = () => { let task = document.getElementById("task_input_field").value; let list = document.getElementById("to-do_list"); list.innerHTML += `<li>${task}<button type="button"onclick="deleteTask(event)">X</button></li>` } function deleteTask(event) { const target = event.currentTarget.closest("li"); document.getElementById("to-do_list").removeChild(target) }

 <input type="text" id="task_input_field"> <button onclick="addTaskToTheList()">Add</button> <ul id="to-do_list"></ul>