title: Remove clicked item from list JQuery
body: <p>I have a simple list where you can add items in html/jquery.
  I want to remove a specific item when i click on it in the list.
  I can add items, they show up but the remove code is not working.</p>
  
  <p>Remove code</p>
  
  <pre><code>$('#items a.delete').on('click', function(){
  $(this).parent().remove();
  });
  </code></pre>
  
  <p>This is my code:</p>
  
  <pre><code>$(document).on('pagebeforeshow', '#home', function(event) {
  homepage();
  });
  
  $('#items a.delete').on('click', function(){
   $(this).parent().remove();
  });
  
  function homepage(){
     // Fetch the existing objects
     objects = getObjects();
  
     // Clear the list
     $('#items').find('li').remove();
  
     // Add every object to the objects list
     $.each(objects, function(index, item){
         element = '&lt;li data-icon="delete"&gt;&lt;a href="#" class="delete"&gt;'+item.title+'&lt;/a&gt;&lt;/li&gt;';
  
         $('#items').append(element);
     });
  
     $('#items').listview();
     $('#items').listview("refresh");
  }
  
  function getObjects(){
     // See if objects is inside localStorage
     if (localStorage.getItem("objects")){
         // If yes, then load the objects
         objects = JSON.parse(localStorage.getItem("objects"));
     }else{
         // Make a new array of objects
         objects = new Array();
  
     }
     return objects;
  }
  </code></pre>
  
  <p>homepage() gets called when you enter the page, it repopulates the list.
  Objects are stored in localstorage.</p>
  
  <p>HTML:
  <code>&lt;ul id="items" data-role="listview" data-inset="true"&gt;&lt;/ul&gt; &lt;br&gt;</code></p>