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

Question

我需要什么：

我正在尝试在按钮点击时创建标签。我已经成功地尝试了通过点击创建div。

问题：

就像我们在所有网站上看到的一样，比如在stack-overflow或者当你写电子邮件地址时，当你完成文本输入后，会出现一个带有“删除”按钮的“标签”，当你将鼠标悬停在上面时。

现在我想要类似这样的效果，但我不知道如何在div上显示那个叉号。

此外，我的问题是当我使用<span>元素时，我也给它们设置了一些背景颜色，但那是静态的。如果文本增长，则文本部分没有背景颜色。

我该如何解决这个问题？

这是我迄今为止尝试过的: 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();
});

- Abhishek Ghosh

---

首先，在文档中，id必须是唯一的；其次，请参考https://dev59.com/nHVC5IYBdhLWcg3wtzqs有关动态创建元素进行事件绑定的问题。 - Teemu

为什么不使用现有的库来完成这个任务呢？比如这个：http://timschlechter.github.io/bootstrap-tagsinput/examples/ 另外，你应该使用CSS类来进行样式设置。 - Mathew

我只是想自己实现这个功能！但感谢@Mathew提供的资源。 - Abhishek Ghosh

@Mathew：那确实是非常有帮助的资源！！我还发现了 Twitter 的 typehead js...！再次感谢！ - Abhishek Ghosh

Answer 1

一些解释 --

$('#newCo').on('click',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(){...});，这样就可以按预期功能运行。

- humbolight

---

非常感谢！我现在明白为什么我的JS删除函数没有起作用了！ - Abhishek Ghosh

Answer 2

注意：以下是对问题（更新之前）的回答：

现在我需要的是将div放置在一起的CSS。我已经看到了实现此目的的代码，但我需要知道如何编写用于动态生成的div的代码。

我尝试的另一件事是创建按钮而不是div。这样做可以使我的按钮并排放置，无需使用额外的CSS。

---

将以下内容添加到您的 CSS 中：

#newCo {
    float: left;
}

同时，从你的JS代码中删除强制使用 width : '30px' ，否则在大量内容下会出现错误。

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

- Salem Ouerdani

Answer 3

你可以使用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/

- Mathew

Answer 4

试试这个：

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

- Luiz Fernando Corrêa Leite

---

请考虑编辑你的帖子，添加更多关于你的代码是如何解决问题的、以及为什么会解决问题的解释。如果一个答案主要只包含代码（即使它是可行的），通常不会帮助提问者理解他们的问题。同时建议在没有足够把握的情况下不要发布猜测性答案。一个好的答案将会提供一个合理的解决方案，解释为什么这个方案可以解决提问者的问题。 - SuperBiasedMan

Answer 5

当您想要添加多个元素时，请添加一些类而非ID。

代码片段已添加

--Joy

//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>

- joyBlanks