title: How can I remove an element from local storage and html by accessing its id
body: <p>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</p>
  <pre class="lang-json prettyprint-override"><code>[{id: 218, question: &quot;who won the NBA finals in 2020&quot;, answer: &quot;LA Lakers&quot;}]
  </code></pre>
  <p>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.</p>
  <p>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.</p>
  <pre class="lang-js prettyprint-override"><code>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) =&gt; {
    e.preventDefault()
    mainCard.classList.remove('hide')
    mainCard.classList.add('show-card')
  })
  // close Main Card
  btnClose.addEventListener('click', () =&gt; {
    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 = &quot;&quot;
      inputA.value = &quot;&quot;
      // *** 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 &lt; cards.length; i++) {
        const card = cards[i];
        let newCard = document.createElement('div')
  
        newCard.className = 'new-card'
        newCard.innerHTML = `
              &lt;p class=&quot;card-id hide&quot;&gt;${card.id}&lt;/p&gt;  
              &lt;p&gt;${card.question}&lt;/p&gt;
              &lt;button class=&quot;btn show&quot;&gt;Show/Hide&lt;/button&gt; 
              &lt;p&gt;${card.answer}&lt;/p&gt;
              &lt;button class=&quot;btn edit&quot;&gt;Edit&lt;/button&gt;  
              &lt;button onclick= &quot;remove()&quot; class=&quot;btn delete&quot;&gt;Delete&lt;/button&gt;
              `
        flashCards.appendChild(newCard)
  
      }
  
    }
  }
  
  function remove() {
    let cards = JSON.parse(localStorage.getItem('cards'))
    let cardId = document.querySelector('.card-id')
  
  }
  
  function edit() {
  
  }
  
  
  btnSave.addEventListener('click', () =&gt; {
    save()
    view()
  })
  
  
  
  
  //  display cards when loading page (refresh)
  window.addEventListener('DOMContentLoaded', () =&gt; {
    view()
  });
  </code></pre>