JavaScript中使用appendChild循环渲染DOM时如何避免重复元素并修复任务删除功能

看起来你遇到了两个核心问题：任务列表重复渲染和删除按钮功能异常，这两个问题其实是相关联的，我们一步步拆解解决：

问题根源分析 #

1. 重复渲染的核心原因：你的renderTaskList函数每次调用时，只是往容器里追加新的任务元素，但从未清空容器中已有的内容。旧的任务元素会一直保留在DOM里，新元素不断叠加，导致列表指数级增长。
2. 删除按钮失效的原因：未清空的DOM中残留着旧的删除按钮，这些按钮绑定的是第一次渲染时的任务索引。当你删除任务后，taskList的结构已经变化，但旧按钮的事件回调仍使用旧索引，点击后会删除错误的任务（或完全无效果）。
3. 无效的判断逻辑：你代码里的if (!(divName.isSameNode(divName)))完全是逻辑错误——一个节点和自身必然是同一个节点，这个条件永远为false，会导致任务元素无法被正常添加到DOM中（你能看到重复可能是测试时这个判断没生效，但这行代码必须删掉）。

修改后的完整代码 #

const taskList = JSON.parse(localStorage.getItem('taskList')) || [];
const btnElemAdd = document.querySelector('.js-button-add');

renderTaskList();

function renderTaskList() {
  const renderElem = document.querySelector('.js-render-result');
  // 1. 每次渲染前清空容器，从根源避免重复
  renderElem.innerHTML = '';
  
  const fragment = document.createDocumentFragment();
  for (const [i, value] of taskList.entries()) {
    const { name, dueDate } = value;
    const divName = document.createElement('div');
    const divDate = document.createElement('div');
    const btnRm = document.createElement('button');

    divName.classList.add('name');
    divDate.classList.add('date');
    btnRm.classList.add('button', 'button-rm');

    btnRm.textContent = 'Remove';
    btnRm.addEventListener('click', () => {
      rmTask(i);
    })

    divName.textContent = `${name}`;
    divDate.textContent = `${dueDate}`;

    // 2. 移除无效的判断逻辑，直接添加元素到片段
    fragment.appendChild(divName);
    fragment.appendChild(divDate);
    fragment.appendChild(btnRm);
  }
  renderElem.appendChild(fragment);
}

btnElemAdd.addEventListener('click', () => {
  const inputElemName = document.querySelector('.js-input-name');
  const inputElemDate = document.querySelector('.js-input-date');
  const name = inputElemName.value.trim();
  const dueDate = inputElemDate.value;

  // 3. 新增输入校验，避免空任务
  if (name && dueDate) {
    taskList.push({ name, dueDate });
    inputElemName.value = '';
    inputElemDate.value = ''; // 补充清空日期输入框
    saveTaskList(); // 先保存到本地存储，再渲染DOM
    renderTaskList();
  }
})

function saveTaskList() {
  localStorage.setItem('taskList', JSON.stringify(taskList));
}

function rmTask(index) {
  taskList.splice(index, 1);
  saveTaskList(); // 删除后同步更新本地存储
  renderTaskList();
}

关键修改点说明 #

1. 清空渲染容器：在renderTaskList开头添加renderElem.innerHTML = '';，每次渲染前彻底清空旧内容，再重新渲染所有任务，从根源上解决重复问题。
2. 移除无效判断：删掉逻辑错误的if (!(divName.isSameNode(divName)))代码块，确保任务元素能正常被添加到DOM中。
3. 同步存储与渲染顺序：添加/删除任务时，先调用saveTaskList同步本地存储，再更新DOM，保证内存数据、本地存储、DOM内容三者一致。
4. 优化用户体验：补充日期输入框的清空操作，新增简单的输入校验，避免用户添加空任务。
5. 修复索引绑定：清空DOM后，每次渲染的删除按钮都会绑定当前taskList的最新索引，点击时能精准删除对应任务。

这样修改后，你的任务列表就能正常实现添加、删除功能，且不会出现重复渲染的问题了。

内容来源于stack exchange