splice()为何未彻底删除元素反而留下空字符串？JS待办列表求助

架构老林

2026-6-24

问题分析与解决

你的问题根本不是splice()没删干净，而是每次调用renderTodoList()时都会往数组里push输入框的值——包括点击删除按钮的时候。点击删除按钮触发renderTodoList()时，输入框是空的，所以会把空字符串''push进todoList，这才导致数组里出现空元素。

错误原因拆解

看你代码的逻辑：

点击删除按钮 → 执行splice(${i},1)删除对应元素 → 调用renderTodoList()
renderTodoList()开头就取输入框的值（此时是空的）→ todoList.push(name)把空字符串加进数组
结果就是：删了一个元素，但又加了一个空元素，数组长度没变，还多出空字符串

修复方案

把添加待办和渲染列表的逻辑分开，不要在渲染函数里做添加操作：

单独写一个添加待办的函数，只有点击「添加」按钮时才调用它，负责把输入框的值push进数组，然后调用渲染函数
renderTodoList()只负责根据当前todoList的内容生成HTML，不再做push操作

修改后的代码示例：

// 全局数组存储待办项
let todoList = [];

// 单独的添加待办函数
function addTodo() {
  const inputElement = document.querySelector('.js-name-input');
  const name = inputElement.value.trim(); // 去掉首尾空格，避免添加空待办
  
  if (name) { // 非空才添加
    todoList.push(name);
    inputElement.value = ''; // 清空输入框
    renderTodoList(); // 添加后渲染
  }
}

// 只负责渲染的函数
function renderTodoList() {
  let todoListHTML = '';

  for(let i=0; i<todoList.length; i++){
    const todo = todoList[i];
    const html = `
      <p>
        ${todo}
        <button onclick="
          todoList.splice(${i},1);
          renderTodoList();
        ">Delete</button>
      </p>
    `;
    todoListHTML += html;
  }

  document.querySelector('.js-display-todo').innerHTML = todoListHTML;
  console.log(todoList);
}