How to remove cloned element div except first div using jquery

Question

I have a problem with removing cloned div. I*m unable to remove the cloned div which div clicked on to be remove. My code is like below:

<div id="item_details">
    <table>
        <tr>
            <td>
                <p class="label_text">Name:</p>
            </td>
            <td>
                <input name="item_name[]" type="text" value="" id="item_name" class="input_text" style="width: 126px;" />
            </td>
            <td>
                <p class="label_text">Brand:</p>
            </td>
            <td>
                <input name="item_brand[]" type="text" value="" id="item_brand" class="input_text" style="width: 126px;" />
            </td>
            <td>
                <p class="label_text">Model No:</p>
            </td>
            <td>
                <input name="model_number[]" type="text" value="" id="model_number" class="input_text" style="width: 126px;" />
            </td>
        </tr>
    </table>
    <p style="margin:-16px 0px 0px 600px;">
        <a href="javascript:void(0)" name="remove_item" class='remove' id="remove_item" style="font-weight:bold;color:red;font-size:16px;">Remove Item</a>
    </p>
</div>

<div id="new_item_details" class="new_item_details"></div>

<p style="margin:0px 0px 0px 0px;">
    <a href="javascript:void(0)" name="add_item" id="add_item" style="font-weight:bold;font-size:16px;">Add New Item Here</a>
</p>

And my jquery code like this:

<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
<script>

jQuery(document).ready(function(){
    var id=0;
    var max=10;
    jQuery('#add_item').click(function(){

        var button = $('#item_details').clone();

        id++;
        button.find('input').val('');
        button.removeAttr('id');
        button.insertBefore('.new_item_details');
        button.attr('id','new_'+id);        

    });

    jQuery('.remove').click(function(e){
        jQuery("#new_1").last().remove();
        //jQuery('#removeitem').toggle( !$("#new_item_details").is(":empty") );
        e.preventDefault();             
    });

});


</script>

I tried like this. For every cloned div I appended new div id with increment number. But I'm unable to remove the particular cloned div. First div dont be removed. please help me how to solve this. Thanks.

manji · Accepted Answer · 2014-11-06T10:48:00.150

0

The problem is that you subscribe to .remove elements click event at page load. The .remove elements inside your cloned divs will not be part of this subscribe. You have to use event delegation to subscribe to new elements created after page load as well:

replace:

jQuery('.remove').click(function(e){

by

jQuery(document).on('click', '.remove', function(e){

Also, a simpler solution will be to just remove the parent div of your clicked .removeelement:

jQuery(document).on('click', '.remove', function(e){
    var parentDiv = jQuery(this).parent().parent();
    // if not original div (id == item_details)
    if(parentDiv.attr('id') !== 'item_details') {
        parentDiv.remove();
    }
    e.preventDefault();
});

edited Nov 06 '14 at 10:48

answered Nov 06 '14 at 10:37

manji

47,442
5
96
103

i tried your code.it removes first div also. it should not be removed – Krishna38 Nov 06 '14 at 10:41
@user3454479, added 'prevent first div removal'. See working [jsfiddle](http://jsfiddle.net/xj6z8euv/). – manji Nov 06 '14 at 10:49
You can set `display: none` on original `.remove` item then display it in cloned items. [jsfiddle](http://jsfiddle.net/xj6z8euv/1/). – manji Nov 06 '14 at 14:38

Balachandran · Answer 2 · 2014-11-06T10:52:34.840

try

use event delegation like which is used by manji

jQuery(document).on("click",".remove",function (e) {

OR use clone(true) : it will copy event handler (deep copy)

var button = $('#item_details').clone(true);

NOTE: id should be unique

 var id = 0;
jQuery(document).ready(function () {

    var max = 10;
    jQuery('#add_item').click(function () {

        var button = $('#item_details').clone(true);

        id++;
        button.find('input').val('');
        button.removeAttr('id');
        button.insertBefore('.new_item_details');
        button.attr('id', 'new_' + id);


    });
    jQuery('.remove').click(function (e) {

        jQuery("#new_"+id).remove();
        //jQuery('#removeitem').toggle( !$("#new_item_details").is(":empty") );
        id--;
        e.preventDefault();


    });

});

**

DEMO

**

score 0 · Answer 3 · answered Nov 06 '14 at 10:47

Whilst the first answer was there before me and pointed out the problem with the click, I'll still post this as I may as well, it's a different approach to solving the removal.

I've added data attributes to each of the clones, and a corresponding data-id to the button too, so on click it check it's id and removes the form with that id.

So if it helps :) http://jsfiddle.net/sfmwbgfa/

        jQuery(document).ready(function(){
            var id=0;
            var max=10;
            jQuery('#add_item').click(function(){

            var button = $('#item_details').clone();

            id++;
            button.find('input').val('');
            button.removeAttr('id');
            button.insertBefore('.new_item_details');
            button.attr('id','new_'+id).attr('data-id', id);
            button.find('.remove').attr('data-id',id); 


        });
            jQuery(document).on('click', '.remove', function(e){
            var thisId = jQuery(this).data('id');
            jQuery('div[data-id="'+thisId+'"]').remove();
            //jQuery('#removeitem').toggle( !$("#new_item_details").is(":empty") );
            e.preventDefault();


        });

        });

How to remove cloned element div except first div using jquery

3 Answers3

DEMO

Linked