如何停止在 JavaScript 中无限克隆表单域？答案

【问题标题】：How can I stop infinite cloning of a form field within JavaScript?如何停止在 JavaScript 中无限克隆表单域？
【发布时间】：2015-06-11 14:09:17
【问题描述】：

我更喜欢 HTML/CSS，所以 JavaScript 对我来说还是很新的。如果能提供任何帮助，我将不胜感激！

我在 JSfiddle 上找到了一个几乎完全满足我需求的 JavaScript sn-p。我正在寻找一种在单击按钮时克隆表单字段的方法。这就是问题所在。每次单击按钮时，此代码都会无限添加一个新字段。我真的需要限制为 2 个新字段（所以总共有 3 个字段）。然后我希望按钮在最后一个字段被克隆后消失，这样用户就不会尝试重复点击它。我整天都在尝试调整这个，但没有运气。这是链接：JS Fiddle link

这里是 JavaScript： document.getElementById('button').onclick = duplicate;

var i = 0;
var original = document.getElementById('duplicater');

function duplicate() {
    var clone = original.cloneNode(true); 
    clone.id = "duplicetor" + ++i; 
    original.parentNode.appendChild(clone);
}

谢谢！

【问题讨论】：

您的意思是每次点击都会无休止地添加字段，还是永远不会停止让您每次点击添加字段？

标签： javascript forms field clone

【解决方案1】：

您已经在跟踪重复的数量，所以添加

if (i === 2) {
    document.getElementById('button').disabled = true;
}

到您的 duplicate() 函数以在单击 2 次后禁用该按钮

JSfiddle

还要注意你的拼写！除了复印机的各种拼写错误之外，您还有onlick="duplicate()" 而不是onclick=duplicate()

【讨论】：

我会禁用它。按钮消失可能会让用户感到不安。
你是一个救生员。这正是我所需要的。谢谢！
啊！我刚刚注意到，当字段被克隆时，它还会克隆在前一个字段中键入的任何文本。有没有办法让按钮复制一个新/空字段？

【解决方案2】：

添加一个计数器。它将检查已创建的字段数是否为或 =

，则不再运行

var i = 0;
var original = document.getElementById('duplicater');

var count = 0;

function duplicate() {
    if(count<2) {
        var clone = original.cloneNode(true); 
        clone.id = "duplicetor" + ++i; 
        original.parentNode.appendChild(clone);
    }

    count++;
}

【讨论】：

【解决方案3】：

只需将您的 if 条件替换为 if (i >= 2) {，这里我们检查 i 是否大于或等于 2，因此隐藏按钮。

【讨论】：