如何仅从LocalStorage中删除选中的任务项？

你的deleteTask函数直接调用localStorage.removeItem("task")，这会删除整个任务存储项，自然所有任务都被清空了。而且你没有处理单个任务在数组和DOM中的删除逻辑，导致点击单个删除按钮就触发了全局任务清空操作。

下面是修改后的完整代码，关键改动点会逐一说明：

JavaScript 代码 #

const tasks = JSON.parse(localStorage.getItem("task")) || [];
const btn = document.getElementById('btn');
const input = document.getElementById('input');
const container = document.getElementById('container');

btn.addEventListener("click", addTask);

function createLi(value) {
  let li = document.createElement("li");
  li.appendChild(document.createTextNode(value));
  container.appendChild(li);

  let deleteButton = document.createElement("button");
  deleteButton.innerText = "\u00D7";
  li.appendChild(deleteButton);

  deleteButton.addEventListener("click", deleteTask);
}

// 添加任务
function addTask() {
  if (!input.value.trim()) return;
  tasks.push(input.value);
  createLi(input.value);
  localStorage.setItem("task", JSON.stringify(tasks));
  input.value = '';
}

// 删除单个任务
function deleteTask(e) {
  const li = e.target.parentElement;
  const taskText = li.firstChild.textContent;
  
  // 从数组中移除对应任务
  const updatedTasks = tasks.filter(task => task !== taskText);
  // 更新localStorage
  localStorage.setItem("task", JSON.stringify(updatedTasks));
  // 更新全局tasks数组
  tasks.length = 0;
  tasks.push(...updatedTasks);
  // 删除DOM中的任务项
  li.remove();
}

// 页面加载时渲染已有任务
tasks.forEach((task) => {
  createLi(task);
});

HTML 代码（无需改动） #

<input type="text" id="input">
<button id="btn">SEND</button>
<ul id="container">
</ul>

• 初始化tasks数组：直接从localStorage读取已有任务，避免页面刷新时重复将存储的任务push到数组中
• deleteTask函数：
  • 通过e.target.parentElement定位当前删除按钮对应的<li>元素
  • 提取任务文本，用filter方法从数组中移除该任务
  • 更新localStorage和全局tasks数组
  • 从DOM中删除对应的任务项
• addTask函数：增加空任务判断，添加完成后清空输入框，提升用户体验

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