javascript - 如何删除附加到可放置 div 的文本

Question

我创建了一个清除按钮，每当将元素放入可放置的 div 中时就会出现。问题是还创建了按钮以清除 div 中的 html，并且在清除元素后我希望按钮淡出。

$('#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)        
    });

然而，如所见HERE它只是没有发生。我很想了解为什么我的按钮无法正常工作以及如何解决此问题。一般而言，任何其他提示也将不胜感激。

Answer 1

更新:经过编辑删除了“实时”的使用(已弃用)。

您的点击处理程序正在尝试绑定(bind)到一个尚不存在的元素。尝试在创建按钮时绑定(bind)点击处理程序:

旧:

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

新:

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