javascript - Remove div element on click jQuery not working - Stack Overflow

admin管理员组

文章数量:1394073

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

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

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

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Aug 10, 2015 at 19:45 Abhishek Ghosh asked Aug 10, 2015 at 19:40 Abhishek GhoshAbhishek Ghosh 2,70633 gold badges3131 silver badges6060 bronze badges 4

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

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

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

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

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/tunecino/wk9uxfz5/5/

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

try this:

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

本文标签： javascriptRemove div element on click jQuery not workingStack Overflow