title: Removing objects from an array onclick
body: <p>I have a an array of items which holds item objects. I want to create a function that when I click on a certain item it is removed from the array. I know I need to use something like splice and I have implemented the following solution but it does the seem to work.</p>
  
  <p>Can anyone tell me what am I doing wrong.</p>
  
  <pre><code>function updateView() {
  
  
  for (var i = 0; i &lt; storeItems.length; i++) {
      output += "&lt;a href='#' id='itemTitle' onclick='removeRecord(" + i + ");'&gt;" 
      + storeItems[i].title + " " + "\n" + "&lt;/a&gt;";
  
     }
  
  function removeRecord(i) {
  
      storeItems.splice(i, 1);
      var newItem = "";
  
      // re-display the records from storeItems.
  
      for (var i = 0; i &lt; storeItems.length; i++) {
          newItem += "&lt;a href='#' onclick='removeRecord(" + i + ");'&gt;X&lt;/a&gt; " 
          + storeItems[i] + " &lt;br&gt;";
      };
      document.getElementById('foods').innerHTML = newItem;
  }
  </code></pre>
  
  <p>I think this the error is in the line below:</p>
  
  <pre><code>output  +=  "&lt;a href='#' id='itemTitle' onclick='removeRecord(" + i + ");'&gt;" +  storeItems[i].title + " " + "\n" + "&lt;/a&gt;"; 
  </code></pre>
  
  <p>Because it does not recognise the "onclick" event even when I try to do a test with a simple alert.</p>
  
  <p>Can anyone tell me what am I doing wrong. Also if you think you need more information to answer this question please let me know.</p>
  
  <p>Thank you in advance.</p>