How can I delete text appended to droppable div

Question

I have created a clear button to appear whenever an element is dropped into a droppable div. Problem is that the button was also created to clear the html within the div and upon clear the item I wanted the button the fade away.

$('#sortcard, #dropbox, #dropbox1').droppable({accept:'.sorting', hoverClass:'border', tolerance: 'touch',
    drop: function (e, ui){

    $(e.target).append(ui.draggable.html() + '<br/>');
        //can use $(this) or (e.target)
    $("#add_friend").show().fadeOut(12000);
    $(e.target).droppable("destroy");
    $(e.target).append("<input type='button' name='Sub' value='clear'/>");
    }
    });

    $(":button").click(function(){
        $(ui.draggable).remove;
        $(":button").fadeOut(20000)        
    });

Yet, as seen HERE it's just not happening. I would love to understand why my button is not working like I want and how to fix this problem. Any other tips in general would also greatly be appreciated.

Answer 1

change

$(":button").fadeOut(20000)

to

$(this).fadeOut(20000)

Answer 2

Update: Edited to remove use of "live" (deprecated).

Your click handler is trying to bind to an element that does not exist yet. Try binding the click handler at the time the button is created:

Old:

$(e.target).append("<input type='button' name='Sub' value='clear'/>");}

New:

$(e.target).append($("<input type='button' name='Sub' value='clear'/>")
           .click(function(){
               $(this).parent().empty();
               $(this).fadeOut(20000);
            }));