JavaScript待办列表删除功能异常：数组元素与UI卡片无法按索引删除

核心问题梳理 #

• 删除操作仅修改了临时变量result，没有同步更新存储原始数据的unique、nodeadd数组，下次渲染时会被旧数据覆盖
• 删除完成后没有调用showNotes()方法重新渲染页面，UI不会同步更新
• 按钮标签闭合错误，<button>开头的标签错误使用</a>闭合，会导致事件绑定异常
• 点击删除按钮传入的索引是字符串类型，需要转成数字后再操作数组

修复后的代码调整 #

1. 修正deleteNote函数 #

function deleteNote(index){
  // 将字符串类型的索引转为数字
  index = Number(index)
  // 直接删除对应索引的1条数据，不需要额外循环
  result.splice(index, 1)
  // 同步更新原始存储数组，避免后续新增任务时旧数据复现
  unique = [...result]
  nodeadd = [...unique]
  // 重新调用渲染方法更新UI
  showNotes()
}

2. 完善showNotes函数的空数据处理 #

找到showNotes函数中给页面元素赋值的部分，补充空状态处理：

let ele=document.getElementById('notes');
if(result.length!=0){
    ele.innerHTML=html;
}else{
    // 全部删除后清空页面容器
    ele.innerHTML = '<p class="text-muted">暂无待办任务</p>'
}

3. 修正HTML中的标签闭合错误 #

两处button标签的闭合都写错了，把</a>替换为</button>：

• 新增任务按钮：把<button class="btn btn-primary" id="addbtn">Add note</a>改为<button class="btn btn-primary" id="addbtn">Add note</button>
• 删除任务按钮：把<button id="${index}" onclick="deleteNote(this.id)" class="btn btn-primary">Delete note</a>改为<button id="${index}" onclick="deleteNote(this.id)" class="btn btn-primary">Delete note</button>

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