Jquery mobile 克隆div并递增

我试图克隆一个div（多次）并添加增量，以便使用XML将结果解析到数据库中。我只想克隆表单部分，不想克隆输入的数据。我正在克隆的Div有3个select和2个radio（添加时所有这些都需要为空）

HTML

这个按钮会递增，但不会隐藏删除按钮

      $('#showNew').click(function() {
      var num = $('.template').length,
      newNum = new Number(num + 1),
      newElem = $('#Template' + num).clone(true, true).attr('id', 'Template' + newNum).appendTo('#place');
      newElem.find('.analysis').attr('id', 'ID' + newNum + '_analysis').attr('name', 'ID' + newNum + '_analysis').val();
      newElem.find('.preserve').attr('id', 'ID' + newNum + '_preserve').attr('name', 'ID' + newNum + '_preserve').val();
      newElem.find('.cool').attr('id', 'ID' + newNum + '_cool').attr('name', 'ID' + newNum + '_cool').val();
    $('#Template'+ num).after(newElem);
   });
 })

我想知道是否有某种方法可以将它们结合起来

---

我也有问题，因为无论我尝试什么，原始div都会变成克隆，并带有删除按钮，而应该是原始div的内容可以更改。

我认为最简单的方法是隐藏模板的原始副本，并将所有克隆基于此。这说明了这种方法

(function ($) {
    var Template = $('#Template');
    var count = 0;
    var nextId = 0;

    Template.find('.removeNew').on('click', function (e) {
        e.preventDefault();
        $(this).closest('.template').remove();
        count--;
    });

    function cloneTemplate(removable) {
        var clone = Template.clone(true, true);
        clone.attr('id', clone.attr('id') + nextId);

        clone.find('label[for]').each(function( index ) {
            var elem = $(this);
            elem.attr('for', elem.attr('for') + nextId);
        });

        clone.find('select, input').each(function( index ) {
            var elem = $(this);
            elem.attr('id', elem.attr('id') + nextId);
            elem.attr('name', elem.attr('name') + nextId);
        });

        if (!removable) {
            clone.find('.removeNew').remove();
        }

        clone.insertBefore("#addNew").removeClass('hide');
        count++;
        nextId++;
    }

    // Create First Analyte and delete the remove button.
    cloneTemplate(false);

    $('a.showNew').on('click', function (e) {
        e.preventDefault();
        cloneTemplate(true);
        return false;
    });
})(jQuery);

将

addnew

按钮放在模板内没有意义，因此我将其移到了外部。所有新克隆都添加到

添加新的
按钮之前

您应该注意到，在上面的脚本中，第一个元素是通过克隆
模板创建的。然后，单击“添加新的”
按钮时，通过调用相同的
clone
函数创建新元素

注意：此解决方案不包括更新元素
id
或
name
属性。您几乎肯定想做的事情。
我强烈建议您使用一致的制表符等清理代码，以便更清楚地了解正在发生的事情。制作一个jsfiddle也将是一个好主意，这样其他人可以编辑您的代码。我得到了您的帮助，但您必须自己清理它。谢谢！它工作得很好（在JSFIDLE上非常完美），除了我整个月都在努力工作之外，在我的状态下，一切似乎都在倒退。我的代码中一定存在某种类型的冲突，这会扰乱我的头脑。我已经把我的表格贴在这里了，我知道它要求很多，但是你介意看看它，试着找出我的问题在哪里吗。sam类型的问题出现在“海底Chl-a样本”选项卡上。问题似乎与使用jquery mobile有很大关系。dom的jquery mobile增强功能与导致问题的元素一起被克隆。这可能会有帮助。我很感激修复。使用新脚本，Div的第一次迭代允许我输入数据并添加新Div，但新Div不能更改。我想我讨厌Jquery手机。
      $('#showNew').click(function() {
      var num = $('.template').length,
      newNum = new Number(num + 1),
      newElem = $('#Template' + num).clone(true, true).attr('id', 'Template' + newNum).appendTo('#place');
      newElem.find('.analysis').attr('id', 'ID' + newNum + '_analysis').attr('name', 'ID' + newNum + '_analysis').val();
      newElem.find('.preserve').attr('id', 'ID' + newNum + '_preserve').attr('name', 'ID' + newNum + '_preserve').val();
      newElem.find('.cool').attr('id', 'ID' + newNum + '_cool').attr('name', 'ID' + newNum + '_cool').val();
    $('#Template'+ num).after(newElem);
   });
 })

(function ($) {
    var Template = $('#Template');
    var count = 0;
    var nextId = 0;

    Template.find('.removeNew').on('click', function (e) {
        e.preventDefault();
        $(this).closest('.template').remove();
        count--;
    });

    function cloneTemplate(removable) {
        var clone = Template.clone(true, true);
        clone.attr('id', clone.attr('id') + nextId);

        clone.find('label[for]').each(function( index ) {
            var elem = $(this);
            elem.attr('for', elem.attr('for') + nextId);
        });

        clone.find('select, input').each(function( index ) {
            var elem = $(this);
            elem.attr('id', elem.attr('id') + nextId);
            elem.attr('name', elem.attr('name') + nextId);
        });

        if (!removable) {
            clone.find('.removeNew').remove();
        }

        clone.insertBefore("#addNew").removeClass('hide');
        count++;
        nextId++;
    }

    // Create First Analyte and delete the remove button.
    cloneTemplate(false);

    $('a.showNew').on('click', function (e) {
        e.preventDefault();
        cloneTemplate(true);
        return false;
    });
})(jQuery);