CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Abhishek Ghosh
Abhishek Ghosh

Reputation: 2706

Remove div element on click jQuery not working

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

Upvotes: 3

Views: 2606

Answers (5)

Luiz Fernando Corr&#234;a Leite
Luiz Fernando Corr&#234;a Leite

Reputation: 1035

try this:

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

Upvotes: 0

Salem Ouerdani
Salem Ouerdani

Reputation: 7886

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/

Upvotes: 1

Joy Biswas
Joy Biswas

Reputation: 6527

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>

Upvotes: 0

humbolight
humbolight

Reputation: 690

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.

Upvotes: 4

Mathew
Mathew

Reputation: 670

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/

Upvotes: 1

Related Questions