用JS点击删除按钮时同步移除列表中对应<a>元素的URL数据

修正后的完整代码 #

let list = [];
const view = document.getElementById('view');
const saveInput = document.getElementById('save-input');
// 补充你代码中缺失的输入框元素获取，替换为你实际的输入框id即可
const input = document.getElementById('your-input-id');

// 页面加载时读取本地存储的历史列表数据
if(localStorage.getItem('list')) {
  list = JSON.parse(localStorage.getItem('list'))
  render(list)
}

saveInput.addEventListener('click', function (){
    list.push(input.value);
    input.value = '';
    localStorage.setItem('list', JSON.stringify(list));
    render(list);
})

// 实现删除处理函数
function remove_item(index) {
  // 删除数组对应索引的元素
  list.splice(index, 1)
  // 同步更新本地存储
  localStorage.setItem('list', JSON.stringify(list))
  // 重新渲染列表
  render(list)
}
   
function render(lst) {
  let listItems = '';  
  // 遍历数组时同步获取索引参数
  lst.forEach((element, index) => {
    listItems += `
      <li>
        <a target='_blank' href='${element}'>${element}</a>
        <img src="images/remove.png" 
           onClick="remove_item(${index})" 
           alt="Remove" width="12" height="12"> 
     </li>`
    });
  view.innerHTML = listItems;
}

关键修改说明 #

• 移除了删除按钮重复的id="remove"属性，HTML中id必须全局唯一，重复id会导致事件绑定异常
• 删除了无效的全局删除按钮事件绑定逻辑，动态生成的元素通过行内onClick绑定的remove_item函数处理删除逻辑
• 渲染列表时在forEach遍历中获取数组索引，将索引作为参数传入remove_item函数
• 实现remove_item函数：通过索引删除list数组对应元素后，同步更新localStorage存储，再重新渲染列表即可完成同步删除
• 补充了页面初始化时读取localStorage历史数据的逻辑，刷新页面后历史列表不会丢失

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