0
いくつかのセクションで入力フィールドの数を増減させようとしています。下のコードで示すように、2つのセクションのみで作成された各フィールドセットは、削除できるように一意のIDを持つ必要があります。フィールドセットIDを増やすと重複が発生することがあります
IDは必ずしも一意ではなく、一貫性がないことがわかりました。時々私は2つのグループの間に10のフィールドセットを追加することができますし、重複IDを取得しないと、私は2番目または3番目のフィールドセットの追加で重複を取得し始めます。
この特定のケースでは、次の図に示すように、3番目のフィールドセットが追加されたときに重複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は何ですかなり、削除ボタンが正しく動作するように、それを何ですか？フィールドセットの削除ボタンの相対位置を使用してフィールドセット要素を探し、idsをすべてスキップします。 – James
はい、削除ボタンのIDです。あなたは2番目の文で何を示唆しているのか分かりません。最初のフィールドセット以外の各フィールドセットには削除オプションがあります。そのIDなしで、特定のフィールドセットに削除ボタンを関連付ける方法を見つけることができませんでした。 – Dave
いくつかの場所でコードを短縮できるので、jQueryを試してみてください。たとえば、[.clone]（https://api.jquery.com/clone/）を使用して要素を複製することができます。動的に作成された要素に対して[イベント委任]（https://learn.jquery.com/events/event-delegation/#event-propagation）を活用してください。 – Mikey