Delete button on a checklist

I am trying to add a delete button next to all of my text in the part "todo list, so they have to be centered with it.

Here is my code I did for now without the delete button :

HTML part :

<h1>Titre</h1>
<h3>Sous-titre</h3>
<input type="search" id="new-task" placeholder="Ajouter une tâche..." />
<button onclick="répondre()"> OK </button>

<hr />
<div id="todo-list">
  <h2>Todo list</h2>
  <ul id="liste"
  </ul>
</div>

<div id="date">
  <input type="datetime-local" value="2023-03-29T11:30" disabled="true" min="2018-06-07T00:00" max="2023-06-14T00:00">
  <div />

JAVASCRIPT part :

var tasks = JSON.parse(localStorage.getItem("memtasks"));

for (let i = 0; i < tasks.length; i++) {
  var t = tasks[i];
  var ul = document.getElementById("liste");
  var li = document.createElement("li");
  li.appendChild(document.createTextNode(t));
  ul.appendChild(li);
}

function répondre() {
  console.log("test", tasks);
  var task = document.getElementById("new-task").value;
  if (!task) {
    return;
  }

  tasks.push(task);
  console.log(tasks);
  localStorage.setItem("memtasks", JSON.stringify(tasks));

  var ul = document.getElementById("liste");
  var li = document.createElement("li");
  li.appendChild(document.createTextNode(task));
  ul.appendChild(li);
  document.getElementById("new-task").value = "";
}

thanks

Here's one way of doing it. I added comments in the code for explanation.

  //I added a fallback to an empty array in case "memtasks" doesn't exist in
//localStorage
var tasks = JSON.parse(localStorage.getItem("memtasks")) || [];
//I refactored the code for creating a task in an "addTaskToDOM" function 
//because it's used when you open the web page and when you add a new task.
function addTaskToDOM(task) {
var ul = document.getElementById("liste");
var li = document.createElement("li");
//When a task is added to the DOM, you can create a "delete" button that 
//will use the "deleteTask" function when clicked
var deleteButton = document.createElement("button");
deleteButton.textContent = "delete";
deleteButton.addEventListener("click",
e => deleteTask(e.target.closest("li"))
);
li.appendChild(task);
li.appendChild(deleteButton);
ul.appendChild(li);
}
//"deleteTask" will remove the task from the DOM 
// update the tasks array 
// then update the localStorage.
function deleteTask(task) {
task.remove();
tasks = Array.from(document.querySelectorAll("#liste li"))
.map(li => li.childNodes[0].textContent);
localStorage.setItem("memtasks", JSON.stringify(tasks));
}
function répondre() {
var task = document.getElementById("new-task").value;
if (!task) {
return;
}
tasks.push(task);
addTaskToDOM(document.createTextNode(task));
localStorage.setItem("memtasks", JSON.stringify(tasks));
document.getElementById("new-task").value = "";
}
for (let i = 0; i < tasks.length; i++) {
addTaskToDOM(document.createTextNode(tasks[i]));
}