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.

Answer 1

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 .remove element:

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

Answer 2

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

**

Answer 3

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


        });

        });