How can I remove an element from local storage and html by accessing its id

Question

This is a very basic flashcard game where you type a question and an answer to a main card and by clicking the save button a new flash card is created in storage as an object inside cards array with an id for example

[{id: 218, question: "who won the NBA finals in 2020", answer: "LA Lakers"}]

at the same time a new flash card element is created and appended to flash cards div. By clicking the delete button in the new created flashcard the specific element will be removed from local storage and the HTML view.

I have tried looping through both the cards array in storage and the cards array in html and comparing id's, But I am sure there is a much more simple way to delete and edit the specific card by clicking on it's buttons. I am having issues calling elements of a new created element from an outside function.

const inputQ = document.querySelector('#input-question')
const inputA = document.querySelector('#input-answer')
const flashCards = document.querySelector('.flash-cards')
const mainCard = document.querySelector('.container')
// btns
const btnAdd = document.querySelector('.add')
const btnClose = document.querySelector('.close')
const btnSave = document.querySelector('.save')



//  open main card
btnAdd.addEventListener('click', (e) => {
  e.preventDefault()
  mainCard.classList.remove('hide')
  mainCard.classList.add('show-card')
})
// close Main Card
btnClose.addEventListener('click', () => {
  mainCard.classList.remove('show-card')
  mainCard.classList.add('hide')
})



function save() {
  if (inputQ.value === '' || inputA.value === '') {
    return false

  } else {
    const id = Math.floor(100 + Math.random() * 900)
    // parse var as an empty cards
    const cards = JSON.parse(localStorage.getItem('cards')) || [];
    // // create new obj from input fields
    const card = {
      id,
      question: inputQ.value,
      answer: inputA.value,
    }
    // push new obj to cards (empty or full)
    cards.push(card);
    // convert cards to string and store in local storage
    localStorage.setItem('cards', JSON.stringify(cards));
    inputQ.value = ""
    inputA.value = ""
    // *** Do not clear the input values here! 
    // or else we will be adding empty strings when we create the new element
    // from another module addCard
  }



}


// https://stackoverflow.com/questions/42219531/how-to-retrieve-data-from-local-storage

function view() {
  if (localStorage.getItem('cards') != null) {
    let cards = JSON.parse(localStorage.getItem('cards'))
    for (let i = 0; i < cards.length; i++) {
      const card = cards[i];
      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)

    }

  }
}

function remove() {
  let cards = JSON.parse(localStorage.getItem('cards'))
  let cardId = document.querySelector('.card-id')

}

function edit() {

}


btnSave.addEventListener('click', () => {
  save()
  view()
})




//  display cards when loading page (refresh)
window.addEventListener('DOMContentLoaded', () => {
  view()
});

Answer 1

Assuming your id's are unique... consider coding your local storage json string to be for an object of objects, instead of an array of objects, where the card IDs make up the keys...

{
  '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"}
}

This would allow you to easily add/remove new cards from the object by referencing the id, since it would then be the key.

You would need to also update code that loops through such as your view function:

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)
    });
  }
}