.NET Core Razor中JavaScript数组按索引删元素不生效如何解决？

常见失效原因 #

• splice参数使用错误：数组删除方法splice的第二个参数为需要删除的元素数量，若误写为0会导致无元素被删除，删除单条元素的正确参数应为Keywords.splice(待删除索引, 1)
• 索引匹配错误：删除时获取的DOM索引与数组实际索引不对应
  • 若给li绑定data-index属性存储索引，删除数组元素后未同步更新剩余li的data-index值，会导致后续删除拿到旧索引，出现删错、删不到元素的问题
  • 循环绑定删除事件时若用var声明索引变量，会因闭包特性导致所有删除事件拿到循环最终的索引值，永远删除最后一个元素或触发索引越界
• 数组引用错误：如果操作的是Keywords数组的浅拷贝副本，删除副本元素不会影响原数组，提交时仍然会携带已删除的元素

修复方案 #

方案1：用唯一标识替代索引（更稳定，推荐） #

给每个新增的关键词对象加唯一ID，删除时通过ID匹配元素，完全规避索引错乱问题：

// 新增关键词逻辑
function addKeyword() {
  const newKey = {
    id: Date.now() + Math.random(), // 生成唯一标识
    content: '用户输入的关键词内容' // 替换为实际业务字段
  }
  Keywords.push(newKey)
  // 渲染li时给li添加data-id属性，值为对应对象的id
}

// 删除关键词逻辑
function handleDelete(e) {
  // 获取当前点击删除按钮对应的li的id
  const targetId = Number(e.target.closest('li').dataset.id)
  // 过滤掉对应id的元素生成新数组
  Keywords = Keywords.filter(item => item.id !== targetId)
  // 此处执行删除对应li的原有逻辑即可
}

方案2：保留索引的修复方法 #

如果一定要用索引实现，每次删除数组元素后，同步更新所有剩余li的data-index属性为最新的数组索引，保证DOM和数组索引一一对应；循环绑定事件时用let声明索引变量，避免闭包问题。

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