How do I remove one specific <li> element from html using basic javascript?

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>`
}

>Solution :

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>