Javascript #生成/删除div时id冲突

我正在尝试设置一个脚本，允许用户生成最多4个div（每个div包含一个输入和一个span）并能够删除它们

var i=1；
$（“.submit source.add source”）。单击（函数（）{
i++；
source=jQuery（'remove'）；
source.insertAfter（“.submit source.source wrap:last”）；
如果（i==4）{
$（“.submit source.add source”）.hide（）；
}
否则{
$（“.submit source.add source”）.show（）；
}
} );
$（文档）.on（“单击”、“.submit source.remove source”，函数（））{
我--；
$（this.parent（）.remove（）；
如果（i==4）{
$（“.submit source.add source”）.hide（）；
}
否则{
$（“.submit source.add source”）.show（）；
}
} );

最多可添加4个不同的来源。
添加输入
通过将可用ID保留在一个数组中，您可以确保不会重复使用任何不应该重复使用的内容

另外，您的if/then逻辑在add和remove函数中都是相同的，因此它们被隔离以消除重复


//存储可用的ID
var availableIDs=[2,3,4]；
const NOT\u AVAIL=“ID\u不可用”；
//此函数返回数组中的第一个元素
//如果阵列不再具有任何可用元素，
//它返回“ID\u不可用”。你可以把它合并起来
//输入代码，以确保最多只能生成4个元素
函数getID（）{
如果（availableIDs.length>0）{
//返回数组中的第一个元素并删除该元素
//从阵列
返回可用的id.shift（）；
}否则{
返回无效；
}
}
$（“.submit source.add source”）。单击（函数（）{
//获取下一个可用ID
var newID=getID（）；
//只要新ID不是“ID\u不可用”，继续：
如果（newID！==不可用）{
source=$（'remove'）；
source.insertAfter（“.submit source.source wrap:last”）；
var theID=$（source.attr（“id”）；
var theLastChar=theID[theID.length-1]；
//测试新元素
log（“新元素的ID是：“+theID”，数组现在包含：“+availableIDs”）；
hideShow（）；
}
} );
$（文档）.on（“单击”，“.submit source.remove source”，函数（）{
var theID=$（this）.parent（）[0].getAttribute（“id”）；
var theLastChar=theID[theID.length-1]；
$（this.parent（）.remove（）；
可用ID.push（最后一个字符）；
log（“要放回数组的ID是：”+theLastChar，
数组现在包含：“+availableIDs”；
hideShow（）；
} );
//添加和删除时使用的常用功能：
函数hideShow（lastChar）{
var$setToWorkOn=$（“.submit source.add source”）；
（availableIDs.length==0）？$setToWorkOn.hide（）：$setToWorkOn.show（）；
}

最多可添加4个不同的来源。
添加输入
你为什么要给他们身份证？只需将元素保留在一个数组中。这主要是为了更清晰，但实际上并不是必需的。尽管如此，我仍然需要解决这个问题，因为这些div中的输入需要不同的名称，因为可能的元素数量有限（而且很少），为什么不使用顺序id生成所有元素，而是在用户“删除”和“添加”它们时隐藏和显示它们呢。当你隐藏它们时，也要禁用它们，这会阻止它们与表单一起提交。哈哈，是的，最初是这样：）我现在编码主要是为了学习，所以我决定将其更改为更动态、更专业的内容，但这比我想象的要难。@eloism请查看我的答案以获得解决方案。谢谢你的回答，这看起来比我做的好多了。然而，它的行为有点奇怪。可用的ID实际上是2 3和4（因为输入#1已经存在）。但是看起来脚本不能增加到4（因此删除“添加输入”的条件从未满足，你知道为什么吗？我现在正在检查它，无论如何，感谢你的帮助：）@eloism这没有问题。我可以更改数组中的值。让我来吧。无论哪种方式，您只能添加总共4个元素，“添加输入”消息仅在适当的时候显示。事实上，我只是将其调整到我的页面，它运行时没有缺陷。也非常感谢您对代码的评论，这很有帮助：）@eloism没问题！别忘了把答案标出来。