javascript - 单击 jQuery 不工作时删除 div 元素

Question

我需要什么:

我试图通过点击按钮来创建标签。我成功地尝试在点击时创建 div。

问题:

正如人们所见过的所有网站一样，例如在 stack-overflow 中或当您编写电子邮件地址时，当您完成编写文本时，会在您悬停时形成一个“标签”和一个“删除”按钮。

现在我想要这样的东西，但我对如何在 div 上显示那个十字感到困惑。

另外，我的问题是当我使用元素时，我也会提供一些背景颜色，但那是静态的。如果文本变长，则文本部分没有背景颜色。

我该如何解决这个问题？

这是我到目前为止尝试过的:http://jsfiddle.net/abhighosh18/wk9uxfz5/1/

JS:

$('.btnAdd').on('click', function () {
    $('<div/>', {
        id: 'newCo',
        title: $("#prodName").val(),
        text: $("#prodName").val()
    }).css({
        fontWeight: 700,
        width : '30px',
        background : 'lightblue',
        padding: '2px',
        margin: '5px',
        float : 'left'
    }).appendTo("#content");
});

$('#newCo').on('click',function(){
    $(this).remove();
});

Answer 1

一些光照--

$('#newCo').on('点击',function(){ $(this).remove(); });

上面的代码不起作用，因为#newCo 元素在该行执行时不存在。

$(document).on('click','#newCo',function(){ $(this).remove(); });

这行重构的代码会监听文档并将处理首次加载 DOM 时不存在的元素。但是，ID 不是您想在这里使用的...因为 ID 需要是唯一的，如果您单击 .btnAdd 元素，很快就会有多个具有相同 ID 的 div。

有很多方法可以实现您想要的，我只是想说明您的方法失败的原因。

解决方法:您可以在创建 div 的点击函数中链接 .addClass("removable-tag")(在 .appendTo() 之前)，然后收听 $(document) .on('click','.removable-tag',function(){...});，这将按预期运行。