Remove div element on click jQuery not working

Question

What I need :

I am trying to create tags on the click of a button. I was successful with my attempt to create divs on the click.

Problems :

As in all the websites one has seen, like in stack-overflow or when you write email addresses , as you finish writing the text a "tag" is formed with a "remove" button when you hover.

Now I want something like this, but I am confused in how to show that cross on the divs.

Also my problem is when I use elements, I am also giving some background color but that is static. And if the text grows then there is no background color on the part of the text.

How should I go about this problem ?

This is what I have tried so far : 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();
});

At first, `id`s must be unique within the document, secondly: http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Teemu, Aug 10 '15 at 19:46
Why don't you use existing library for this? Like this one: http://timschlechter.github.io/bootstrap-tagsinput/examples/ Also, you should use CSS class for your styling. — Mathew, Aug 10 '15 at 19:50
I was just trying to make the functionality myself! But thanks for the resource @Mathew — Abhishek Ghosh, Aug 10 '15 at 19:53
@Mathew : that was indeed a very helpful resource!! also found the twitter's typehead js...! Thanks again! — Abhishek Ghosh, Aug 10 '15 at 20:21

score 4 · Accepted Answer · answered Aug 10 '15 at 20:18

Some illumination --

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

The above won't work because the #newCo element does not exist at the time that line executes.

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

This refactored line of code listens to the document and WILL work on elements that don't exist at the time the DOM is first loaded. However, ID is not what you want to use here... because IDs need to be unique and there would quickly be several div withs the same ID if you click the .btnAdd element.

There are many ways to accomplish what you want, I just wanted to illustrate why your approach is failing.

THE FIX: you could chain .addClass("removable-tag") within your div-creating click function (before .appendTo()), and listen to $(document).on('click','.removable-tag',function(){...});, and THAT would function as intended.

Thank you so much ! I now understand why my JS remove function did not work! — Abhishek Ghosh, Aug 10 '15 at 20:20

score 1 · Answer 2 · answered Aug 10 '15 at 19:45

You can use display: inline-block css property and min-width instead of 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/

Salem Ouerdani · Answer 3 · 2015-08-10T21:47:49.260

NOTE: What follow is an answer to this part of question ( before update ) :

Now what I need is the CSS for the divs to be placed side-by-side. I have seen the code for doing so, but I need to know how to write the code for dynamically generated divs.

Another thing i tried was creating buttons instead of divs. That placed my buttons side by side without any extra effort from CSS.

add this to your css :

#newCo {
    float: left;
}

and remove the forcing width : '30px', from your JS code otherwise it will get broken on large content.

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

score 0 · Answer 4 · answered Aug 10 '15 at 20:23

Add some class not id when you want to add multiple elements.

snippet added

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

score 0 · Answer 5 · edited Oct 29 '15 at 03:36

0

try this:

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

edited Oct 29 '15 at 03:36

Jose Ricardo Bustos M.

8,016
6
40
62

answered Oct 29 '15 at 03:12

Luiz Fernando Corrêa Leite

842
1
7
11

Please consider editing your post to add more explanation about what your code does and why it will solve the problem. An answer that mostly just contains code (even if it's working) usually wont help the OP to understand their problem. It's also recommended that you don't post an answer if it's just a guess. A good answer will have a plausible reason for why it could solve the OP's issue. – SuperBiasedMan Oct 29 '15 at 11:49

Remove div element on click jQuery not working

What I need :

Problems :

5 Answers5