My clone is cloning all the previous added items

Admin 1
Viewed 50

So i have an MVC app, i want to clone the div with the tag class="item_details" but my problem is that when i clone 1 time everything is good, then i clone a second time but it will clone the 2 previous items.

I tried to reproduce the exact same from this fiddle, since it was doing what i want : https://jsfiddle.net/Bala_chandran/vz58n67r/7/

So this is my add items function which is pretty much the same as the fiddle, so i have no clue why it is not behaving like it.

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

Note : the div i want to clone contains an EditorFor which is used to make all the input fields appear and i added somme // comments in the code to show where is the div containing the items i want to clone and the add button.

Can anyone help to tell me why this is not behaving the same ? Thanks a lot.

<div class="card">
  <div class="card-header" id="headingFrHospCmx@(i)">
    <h2 class="mb-0">
      <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseFrHospCmx@(i)" aria-expanded="false" aria-controls="collapseTwo">
                                                        <b>TEST</b> TEST Hospitalisation
                                                    </button>
    </h2>
  </div>
  <div id="collapseFrHospCmx@(i)" class="collapse @ViewBag.ExpandHospitalisation" aria-labelledby="headingTwo" data-parent="#accordionExample">
    <div class="card-body">
      <div id="ListeFraisHospitalisation@(i)_Global">

        @for (int y = 0; y
        < Model.Formulaire.Detail.DetailCmp.ListeCmpt.ListeCmptETS[i].ListeHospitalisation.Liste_Hospitalisation.Count; y++) { <div style="border:1px solid black;" id="FraisHospitalisation@(i)_@(y)" class="classHospitalisation@(i)">
          <div class="item_details"> // item i want to clone @Html.EditorFor(x => Model.Formulaire.Detail.DetailCmp.ListeCmpt.ListeCmptETS[i].ListeHospitalisation.Liste_Hospitalisation[y])
            <a href="#" name="remove_item" class='remove' id="remove_item">Delete</a> //where i delete
          </div>
      </div>
      }

    </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> // place i click to clone

    </p>
  </div>
</div>
</div>
asp.net-mvc jquery javascript
2 Answers

Only one element is allowed with a given ID.

You have to clone only one Item. You can achieve this by using:

$("#item_details").first().clone(true);

If you click on the first lines remove, it will reduce id every time. So negative values could be possible.

The remove link will also always remove the last one added, not the one clicked on.

To remove rows, that where clicked it would be better to add a search for the parent div like $(this).parents('div[id^="new_"]').remove(); or make us of a class like $(this).parents('.item-details') and don't decrease the var id. Using this, you can also prevent the last from being removed with:

if ($('.item-details').length > 1)
  $(this).parents('.item-details').remove();
user_103048040

Two remarks:

  • I would use clone only on a template, as in, an element that's not actually used by the user. That way you don't have to write additional code to "clean up" any changes made by the user in the element you're cloning. A template is basically a piece of HTML that's present somewhere in the DOM but not visible to the user (e.g. display: none;).
  • The remove logic doesn't have to depend on the id to figure which row it is. You can use e.currentTarget on the incoming event to figure out which row it is.
user_5469670
Related