【发布时间】：2017-05-30 21:58:50
【问题描述】：
我正在尝试允许为几个不同的部分增加或减少输入字段的数量。正如下面的代码所示，只有 2 个部分，创建的每个字段集都应该有一个唯一的 ID 以允许将其删除。
我观察到 ID 并不总是唯一的，但也不一致。有时我可以在 2 个组之间添加 10 个字段集而不会得到任何重复的 ID，而其他时候我会在添加第二个或第三个字段集时开始得到重复。
如下图所示，在这种特殊情况下，重复 ID 在添加第三个字段集时开始发生。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Testing Fieldset Add/Delete</title>
<script type="text/javascript" src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script type="text/javascript">
function AddGroup1() {
newFS = newFieldset(); // build a new fieldset ID to use
infield = '<fieldset id="' + newFS + '"><label for="group1new">Group 1</label>';
infield += '<input type="text" name="group1[]" value="0" size="15" maxlength="15" />';
infield += '<a href="#" onclick="deleteID(' + newFS + ');return false;" title="Delete This Entry">';
infield += 'Delete</a></fieldset>';
var div = document.getElementById('moregroup1');
div.innerHTML += infield;
} // end of the AddGroup1 function
function AddGroup2() {
newFS = newFieldset(); // build a new fieldset ID to use
infield = '<fieldset id="' + newFS + '"><label for="group2new">Group 2</label>';
infield += '<input type="text" name="group2[]" value="0" size="15" maxlength="15" />';
infield += '<a href="#" onclick="deleteID(' + newFS + ');return false;" title="Delete This Entry">';
infield += 'Delete</a></fieldset>';
var div = document.getElementById('moregroup2');
div.innerHTML += infield;
} // end of the AddGroup2 function
function newFieldset() {
var fpoint = 1; // fieldset ID pointer so we may address each one individually
var ids = $("fieldset[id^='newFieldset_']").map(function() { // get any already there
var partsArray = this.id.toString().split('_'); // break into pieces
fpoint = partsArray[1]; // first element of the resulting array should be a number
fpoint++; // increment by one
}).get(); // end of the map
return "newFieldset_" + fpoint; // give the caller the new fieldset ID
} // end of the newFieldset function
function deleteID(id2Delete) {
var deleteID = document.getElementById(id2Delete.id);
deleteID = deleteID.id;
$("#" + deleteID).remove();
} // end of the deleteID function
</script>
</head>
<body>
<h1>Testing Fieldset Add/Delete</h1>
<form method="post" action="WeedsTest.html">
<fieldset>
<label for="group1">Group 1</label>
<input type="text" name="group1[]" value="0" size="15" maxlength="15" />
<a href="#" onclick="AddGroup1();return false;" title="Add Additional Group 1">Add</a>
</fieldset>
<div id="moregroup1"></div>
<fieldset>
<label for="group2">Group 2</label>
<input type="text" name="group2[]" value="0" size="15" maxlength="15" />
<a href="#" onclick="AddGroup2();return false;" title="Add Additional Group 2">Add</a>
</fieldset>
<div id="moregroup2"></div>
</form>
</body>
</html>【问题讨论】：
-
id 有什么用，删除按钮可以工作吗？我会使用删除按钮在字段集中的相对位置来定位字段集元素并完全跳过 id。
-
是的，ID 用于删除按钮。不知道你对第二句话的建议是什么。除了第一个之外，每个字段集都有一个删除选项。我无法找到将删除按钮与没有该 ID 的特定字段集相关联的方法。
-
你应该尝试使用 jQuery，因为你可以在几个地方缩短你的代码。例如，您可以使用.clone 来复制元素。并利用 event delegation 动态创建元素。
-
感谢 Mikey 的建议，但我无法让 .clone 按预期工作。第一个字段集的内容（即被克隆的内容）包含“添加”按钮，但被克隆的集需要一个“删除”按钮。如果有办法使用 .clone 并更改字段集内容的特定部分，我会全力以赴。 jQuery 和 JavaScript 不是我的强项。
-
我听到了。习惯 JavaScript 世界确实需要练习。克隆元素时，将其缓存（将其存储在变量中）。然后在该元素中找到按钮并将其删除 - 或者更好的 replace it 例如
clonedFieldset.find('a').replaceWith(...).
标签： javascript fieldset