title: How to delete a specific item/object in localStorage?
body: <p>Turns out that my localStorage["items"] stored my JSON as a string.</p>
  
  <pre><code>"["{\"itemId\":1, \"itemName\":\"item1\"}", "{\"itemId\":2, \"itemName\":\"item2\"}",
  "{\"\":3, \"itemName\":\"item3\"}",]"
  </code></pre>
  
  <p>This is what it looks like when I JSON.parse(localStorage["items"]):</p>
  
  <pre><code>["{"itemId":1, "itemName":"item1"}", "{"itemId":2, "itemName":"item2"}"
  "{"itemId":3, "itemName":"item3"}"]
  </code></pre>
  
  <p>So in my loop I made it into an object by using <code>jQuery.parseJSON</code>:</p>
  
  <pre><code>var object = jQuery.parseJSON(item[i]);
  </code></pre>
  
  <p>Right now, what I want to do is delete the object where <code>itemId = 3</code> and make sure that the object is totally removed from the localStorage.</p>
  
  <p>Here's my Javascript so far:</p>
  
  <pre><code>$("#button_delete").on("click", function(e){
    e.preventDefault();
  
    var items = JSON.parse(localStorage.getItem('items'));
      for (var i = 0; i &lt; items.length; i++) {
  
        var object = JSON.parse(items[i]);
         if(object.request_id == 3){
           console.log(items) 
           delete items[i] // slice doesn't work not sure why
           console.log(items)
         }     
      }
  
      item = JSON.stringify(items);
      console.log(item);
      localStorage.setItem('items', item);
  })
  </code></pre>
  
  <p><strong>UPDATED</strong></p>
  
  <p>When I click the button now, it will delete that item however it will not delete the comma before it.</p>
  
  <p>When I check the localStorage["items"] in the browser it returns this:</p>
  
  <pre><code>"["{\"itemId\":1, \"itemName\":\"item1\"}","{\"itemId\":2, \"itemName\":\"item2\"}",null]"
  </code></pre>
  
  <p>I have another page that will display the info in the html and it returns the error:</p>
  
  <p><code>Uncaught TypeError: Cannot read property 'itemId' of null</code>.</p>
  
  <p>So right now is there a way to check or search in localStorage["items"] specifically for <code>,null</code> and remove it so that the error won't show?</p>
  
  <p>Code on how I'm displaying the info in HTML:</p>
  
  <pre><code>    var items = JSON.parse(localStorage.getItem('items'));
      var itemsHTML = "";
  
      for(var i = 0; i &lt; items.length; i++){
  
        var object = jQuery.parseJSON(items[i]);
  
        var displayItemId = object.itemId;
        var displayItemName = object.itemName;
  
        itemsHTML += "&lt;li id="+displayItemId+"&gt;"+displayItemName+"&lt;/li&gt;";
      }
  
      $("#viewItemList").html(itemsHTML); 
  </code></pre>