为Todo List任务项添加居中对齐的删除按钮求助

要实现给每个任务添加删除按钮并让按钮与文本居中对齐，你需要修改JavaScript逻辑来生成带删除按钮的任务项，并通过CSS实现居中对齐的布局。以下是完整的修改代码：

修改后的HTML（新增样式部分） #

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

<style>
  /* 让任务项内部元素居中对齐 */
  #liste li {
    display: flex;
    align-items: center;
    gap: 10px; /* 文本和按钮之间的间距 */
    margin: 8px 0;
    justify-content: center; /* 整体居中 */
  }
</style>

修改后的JavaScript #

// 初始化任务数组，避免localStorage为空时出错
var tasks = JSON.parse(localStorage.getItem("memtasks")) || [];

// 渲染任务列表的函数，复用逻辑
function renderTasks() {
  const ul = document.getElementById("liste");
  ul.innerHTML = ""; // 清空现有列表避免重复渲染
  
  tasks.forEach((task, index) => {
    const li = document.createElement("li");
    
    // 创建任务文本节点
    const taskText = document.createTextNode(task);
    li.appendChild(taskText);
    
    // 创建删除按钮
    const deleteBtn = document.createElement("button");
    deleteBtn.textContent = "×";
    deleteBtn.style.cursor = "pointer";
    // 绑定删除事件
    deleteBtn.onclick = () => {
      tasks.splice(index, 1); // 从数组中删除对应任务
      localStorage.setItem("memtasks", JSON.stringify(tasks)); // 更新本地存储
      renderTasks(); // 重新渲染列表
    };
    
    li.appendChild(deleteBtn);
    ul.appendChild(li);
  });
}

// 页面加载时渲染任务
renderTasks();

function répondre() {
  const task = document.getElementById("new-task").value.trim();
  if (!task) return;
  
  tasks.push(task);
  localStorage.setItem("memtasks", JSON.stringify(tasks));
  renderTasks(); // 重新渲染列表
  document.getElementById("new-task").value = "";
}

关键修改说明 #

• CSS布局：给<li>添加display: flex和align-items: center，让文本和按钮垂直居中，justify-content: center让整个任务项内容水平居中，gap控制两者间距。
• 复用渲染逻辑：封装renderTasks函数，避免初始化和新增任务时重复写DOM操作代码，同时解决删除后更新列表的问题。
• 删除按钮功能：每个按钮绑定点击事件，通过splice删除数组中对应索引的任务，更新localStorage后重新渲染列表。
• 初始化容错：处理localStorage为空的情况，默认赋值空数组，避免报错。

内容的提问来源于stack exchange，提问作者Thomas Reyne