title: jQuery Removing list item with jQuery, Fade out - Delete from DOM
body: <p>Right now I am using a jQuery inline script and what I want to do is add a delete option where if deleted, it will fade out and remove from the DOM.  Right now, this is not hooked up to a database at all, I am using a VIN decoder so these are the default features it pulls.  </p>
  
  <p>The code I provided below, of course, deletes every single list item.  I want to only delete the list item that I clicked "Delete" for.  I'm not sure how to accomplish this because there is no unique class or anything.</p>
  
  <p><img src="https://i.stack.imgur.com/kjysx.jpg" alt="enter image description here"></p>
  
  <p><strong>jQuery Code:</strong></p>
  
  <pre><code>// plugin defaults
  $.inlineEdit.defaults = {
     hover: 'ui-state-hover',
     value: '',
     save: '',
     buttons: '&lt;button class="save"&gt;save&lt;/button&gt; &lt;button class="cancel"&gt;cancel&lt;/button&gt; &lt;a href="#" class="delete"&gt;delete&lt;/a&gt;',
     placeholder: 'Click to edit',
     control: 'input',
     cancelOnBlur: false,
     saveOnBlur: false
  };
  
  .find( 'a.delete' )
              .bind( 'click', function( event ) {
  
                  $("li.editable").fadeOut(300, function() { 
                      $(this).remove(); 
                  });
  
                  return false;
              })
          .end()
  </code></pre>