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

Question

I'm trying to make a to-do list.

I've managed to make new tasks appear as list elements <li> inside unordered list (with a button next to each element which I want to use to delete this particular element. The problem is, I can't figure out how to do that. I've read about removeChild(), but it seems to only work on first or last element.

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 the correct li element using event.currentTarget.closest("li") and remeve it from the selector.

Working Fiddle

 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>