How to remove the cloned elements using jquery -

How to remove the cloned elements using jquery -

i have problem removing cloned elements div. code this

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

here div add together , remove button

<div id="new_item_details" class="new_item_details"></div> <div style="display:none;" id="removeitem"> <p style="margin:0px 0px 0px 600px;"> <input type="button" name="remove_item" id="remove_item" value="remove item" class="cv-form-control button cv-submit"> </p> </div> <br/> <p style="margin:0px 0px 0px 0px;"> <input type="button" name="add_item" id="add_item" value="add new item" class="cv-form-control button cv-submit"> </p>

and jquery code

jquery(document).ready(function () { jquery('#add_item').click(function () { var button = $('#item_details').clone(); button.find('input').val(''); jquery(".new_item_details").append(button); jquery('#removeitem').show(); }); jquery('#remove_item').click(function (e) { jquery(".new_item_details:last").remove(); e.preventdefault(); }); });

using i'm unable remove cloned div properly.

you have remove lastly kid of #new_item_details element appending cloned elements

class="snippet-code-js lang-js prettyprint-override">jquery(function ($) { $('#add_item').click(function () { var button = $('#item_details').clone(); button.find('input').val(''); button.removeattr('id');//id of element must uniue $(".new_item_details").append(button); $('#removeitem').show(); }); $('#remove_item').click(function (e) { $("#new_item_details > div").last().remove(); $('#removeitem').toggle( !$("#new_item_details").is(":empty") ); e.preventdefault(); }); }); class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <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> </div> <div id="new_item_details" class="new_item_details"></div> <div style="display:none;" id="removeitem"> <p style="margin:0px 0px 0px 600px;"> <input type="button" name="remove_item" id="remove_item" value="remove item" class="cv-form-control button cv-submit"> </p> </div> <br/> <p style="margin:0px 0px 0px 0px;"> <input type="button" name="add_item" id="add_item" value="add new item" class="cv-form-control button cv-submit"> </p>

jquery