我的克隆正在克隆所有以前添加的项目答案

【问题标题】：My clone is cloning all the previous added items我的克隆正在克隆所有以前添加的项目
【发布时间】：2022-01-03 23:52:43
【问题描述】：

所以我有一个 MVC 应用程序，我想克隆带有标签 class="item_details" 的 div，但我的问题是当我克隆 1 次时一切都很好，然后我克隆第二次，但它会克隆前 2 个项目.

我试图从这个小提琴中重现完全相同的内容，因为它正在做我想做的事情：https://jsfiddle.net/Bala_chandran/vz58n67r/7/

所以这是我的添加项目功能，它与小提琴几乎相同，所以我不知道为什么它的行为不像它。

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

注意：我要克隆的 div 包含一个 EditorFor，用于显示所有输入字段，我在代码中添加了 somme // cmets 以显示包含我要克隆的项目的 div 和添加按钮。

谁能帮忙告诉我为什么这不一样？非常感谢。

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

【问题讨论】：

只克隆一个 first 或在页面加载时将单个克隆存储在内存中。还请显示实际代码，因为没有 id="item_detail"，因为 jQuery 使用 id 选择器 $('#item_details')
@charlietfl 我实际上用 first() 修复了它，就像发布答案的人说的那样，它有效:) 但他删除了答案：O
@Christopher 绝对是在正确的轨道上，但在回答中有一些误导性的不准确陈述
我更正了自己并取消了删除。感谢@charlietfl 的提示。 =)

标签： javascript jquery asp.net-mvc

【解决方案1】：

给定 ID 只允许一个元素。

你只需要克隆一个项目。您可以通过以下方式实现：

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

如果你点击第一行删除，每次都会减少 id。所以负值是可能的。

删除链接也将始终删除最后添加的链接，而不是点击的链接。

要删除行，最好在单击的位置添加对父 div 的搜索，例如 $(this).parents('div[id^="new_"]').remove(); 或使我们成为 $(this).parents('.item-details') 之类的类，并且不要减少 var id。使用它，您还可以防止最后一个被删除：

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

【讨论】：

“但是选择器会找到与给定 ID 匹配的每个项目” ...不，这不是真的。 id 选择器只会返回第一个匹配项。如果不确定，请自行尝试
@Christopher 非常感谢，我有一个问题，它可能没有链接到那个，但是你知道为什么当我在输入字段中为第一个输入列表输入数据然后我添加一个新项目，第一个项目中填写的字段对应的字段也会被第二个项目填写？谢谢
这就是@Martin Devlers 在他的回答中所说的，如果你克隆一个节点，你也会克隆输入的值。（这也是 vanilla .cloneNode() 函数的默认行为）。将带有 <div id="item_details_template" class="item-details">...</div> 的模板存储在隐藏块 (<div style="display: none;">) 中并每次从那里复制模板将是避免在每一行中设置不需要的值/类的最佳方法。

【解决方案2】：

两个备注：

我只会在模板上使用clone，例如，用户实际上并未使用的元素。这样您就不必编写额外的代码来“清理”用户在您正在克隆的元素中所做的任何更改。模板基本上是一段 HTML，它存在于 DOM 中的某处，但对用户不可见（例如 display: none;）。
删除逻辑不必依赖id 来确定它是哪一行。您可以在传入事件上使用e.currentTarget 来确定它是哪一行。

【讨论】：