删除单击jQuery上的div元素不起作用

Question

我需要的 ：

我试图在单击按钮时创建标签 。 尝试在点击上创建div的尝试非常成功。

问题 ：

就像在所有网站中看到的那样，就像在堆栈溢出或当您写电子邮件地址时一样，当您完成写文本时，当您将鼠标悬停时，会形成带有“删除”按钮的“标签”。

现在我想要这样的东西，但是我对如何在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('click',function(){ $(this).remove(); });

由于行执行时#newCo元素不存在，因此上述方法不起作用。

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

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

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

修复：您可以在创建div的click函数（在.appendTo（）之前.addClass("removable-tag")内链接.addClass("removable-tag") ，并收听$(document).on('click','.removable-tag',function(){...}); ，它将按预期运行。

Answer 2

您可以使用display：inline-block css属性和min-width而不是width：

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

http://jsfiddle.net/Lathtqd8/

Answer 3

注意：以下是对此部分问题的解答（ 更新之前 ）：

现在我需要的是将div并排放置的CSS。 我已经看到了这样做的代码，但是我需要知道如何为动态生成的div编写代码。

我尝试的另一件事是创建按钮而不是div。 这使我的按钮并排放置，而CSS却没有付出任何额外的努力。

---

将此添加到您的CSS：

#newCo {
    float: left;
}

并从您的JS代码中删除强制width : '30px',否则在大内容时会损坏。

http://jsfiddle.net/tunecino/wk9uxfz5/5/

Answer 4

当您想添加多个元素时，添加一些不是id的类。

新增片段

- 喜悦

 //javascript $('.btnAdd').on('click', function () { $('<div/>', { class: 'newCo', title: $("#prodName").val(), text: $("#prodName").val(), 'data-idn':'some_unique_number' }).append('<a>x</a>') .appendTo("#content") .find('a').click(function(){ var idn = $(this).parent().data('idn'); $(this).parent().remove(); //removeCallback(idn); //call anything with idn if required }); }); 

 /*CSS*/ .newCo{float:left;min-width:30px;background:lightblue;font-weight:700;padding:2px;margin:5px;} .newCo > a {cursor:pointer;margin:0 0 0 3px;border-radius:50%;color:red;padding:0;text-shadow:0px 0px 1px #fff;font-weight:200;font-size:16px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Product Name:<input id="prodName" type="text"> <button class="btnAdd" value="Click Me!">Add Product</button> <br/><br/><br/><div id="content" height="100px" width="100px" style="color:blue"></div> 

Answer 5

尝试这个：

$("#mydiv").off('click');