Javascript 如何通过访问元素的id从本地存储和html中删除元素

这是一款非常基本的抽认卡游戏，您可以在主卡上键入问题和答案，然后单击“保存”按钮，在存储器中创建一张新的抽认卡，作为卡阵列中的一个对象，例如id

[{id:218，问题：“谁赢得了2020年的NBA总决赛”，回答：“洛杉矶湖人队”}]

同时，将创建一个新的闪存卡元素并将其附加到闪存卡分区。通过单击新创建的闪存卡中的删除按钮，特定元素将从本地存储和HTML视图中删除

我已经尝试过在存储器中的cards数组和html中的cards数组中循环并比较id，但是我相信有一种更简单的方法可以通过单击特定卡片的按钮来删除和编辑该卡片。从外部函数调用新创建的元素时遇到问题

const inputQ=document.querySelector（“#输入问题”）
常量inputA=document.querySelector（“#输入答案”）
const flashCards=document.querySelector（“.flashCards”）
const mainCard=document.querySelector（“.container”）
//基站
const btnAdd=document.querySelector（'.add'）
const btnClose=document.querySelector（“.close”）
const btnSave=document.querySelector（'.save'）
//打开主卡
btnAdd.addEventListener（'click'，（e）=>{
e、 预防默认值（）
mainCard.classList.remove（'hide'）
mainCard.classList.add（'show-card'）
})
//关闭主卡
btnClose.addEventListener（'单击'，（）=>{
mainCard.classList.remove（'show-card'））
mainCard.classList.add（'hide'）
})
函数save（）{
if（inputQ.value==''| | inputA.value==''）{
返回错误
}否则{
const id=Math.floor（100+Math.random（）*900）
//将var解析为空值
const cards=JSON.parse（localStorage.getItem（'cards'））| |[]；
////从输入字段创建新的obj
常数卡={
身份证件
问题：inputQ.value，
回答：inputA.value，
}
//将新obj推入卡（空或满）
卡片。推（卡片）；
//将卡转换为字符串并存储在本地存储器中
setItem（'cards'，JSON.stringify（cards））；
inputQ.value=“”
inputA.value=“”
//***请勿清除此处的输入值！
//否则，我们将在创建新元素时添加空字符串
//从另一个模块添加卡
}
}
// https://stackoverflow.com/questions/42219531/how-to-retrieve-data-from-local-storage
函数视图（）{
if（localStorage.getItem（'cards'）！=null）{
let cards=JSON.parse（localStorage.getItem（'cards'））
for（设i=0；i${card.id}

${card.question}

显示/隐藏
${card.answer}

编辑
删除
`
flashCards.appendChild（新卡）
}
}
}
函数删除（）{
let cards=JSON.parse（localStorage.getItem（'cards'））
设cardd=document.querySelector（“.card id”）
}
函数编辑（）{
}
btnSave.addEventListener（'单击'，（）=>{
保存（）
视图（）
})
//加载页面时显示卡片（刷新）
window.addEventListener（'DOMContentLoaded'，（）=>{
视图（）
});

假设您的id是唯一的。。。考虑将本地存储JSON字符串编码为对象的对象，而不是对象数组，其中卡ID构成键……/P>

{
  '218':{id: 218, question: "who won the NBA finals in 2020", answer: "LA Lakers"},
  '219':{id: 219, question: "who was the 1st president", answer: "George Washington"}
}

这将允许您通过引用id轻松地从对象中添加/删除新卡，因为它将是密钥

您还需要更新循环通过的代码，例如查看函数：

function view() {
  if (localStorage.getItem('cards') != null) {
    let cards = JSON.parse(localStorage.getItem('cards'))
    let cardKeys = Object.keys(cards);
    cardKeys.forEach(key => {
      const card = cards[key];
      let newCard = document.createElement('div')
      newCard.className = 'new-card'
      newCard.innerHTML = `
            <p class="card-id hide">${card.id}</p>  
            <p>${card.question}</p>
            <button class="btn show">Show/Hide</button> 
            <p>${card.answer}</p>
            <button class="btn edit">Edit</button>  
            <button onclick= "remove()" class="btn delete">Delete</button>
            `
      flashCards.appendChild(newCard)
    });
  }
}

函数视图（）{
if（localStorage.getItem（'cards'）！=null）{
let cards=JSON.parse（localStorage.getItem（'cards'））
让cardKeys=Object.key（卡片）；
cardKeys.forEach（键=>{
常数卡=卡[钥匙]；
让newCard=document.createElement（'div'）
newCard.className='newCard'
newCard.innerHTML=`
${card.id}
${card.question}

显示/隐藏
${card.answer}

编辑
删除
`
flashCards.appendChild（新卡）
});
}
}

您能否只向我们展示您遇到问题的代码，而不是将整个代码粘贴到您的问题中？请阅读，然后根据指导原则重新编辑您的问题。谢谢您的回答，我试图按照您的指示进行操作，但我得到了id:{问题：“今年是几年”，回答：“2020”}而不是随机数字，您能演示如何操作吗？下面是我的代码：const id=Math.floor（100+Math.random（）*900）const cards=JSON.parse（localStorage.getItem（'cards'））|{}；constcard={问题：inputQ.value，答案：inputA.value，}cards.id=card localStorage.setItem（'cards'，JSON.stringify（cards））；cards.id=卡将在卡的内部创建一个名为“id”的密钥。。。你需要做卡片[id]=卡片；