Search code examples
javascriptjquerydomfade

jQuery Removing list item with jQuery, Fade out - Delete from DOM

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.

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.

enter image description here

jQuery Code:

// plugin defaults
$.inlineEdit.defaults = {
   hover: 'ui-state-hover',
   value: '',
   save: '',
   buttons: '<button class="save">save</button> <button class="cancel">cancel</button> <a href="#" class="delete">delete</a>',
   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()
Solution

  • Just replace $("li.editable") with $(this).closest("li.editable") and you should be fine.