divを生成/削除する際に#idの競合が発生する

Question

私は最大4つのdiv（それぞれが入力と範囲を含む）とそれらを削除する機能をユーザが生成できるようにスクリプトを設定しようとしています。

var i = 1; 
 
$(".submit-source .add-source").click(function() { 
 
\t i++; 
 
\t source = jQuery('<div id="source-wrap-' + i + '" class="source-wrap" ><input name="source-' + i + '" type="text"/><span class="remove-source">remove</span></div>'); 
 
\t source.insertAfter(".submit-source .source-wrap:last"); 
 
\t \t \t \t 
 
\t if (i == 4) { 
 
\t \t $(".submit-source .add-source").hide(); 
 
\t } 
 
\t else { 
 
\t \t $(".submit-source .add-source").show(); 
 
\t } 
 
}); 
 
$(document).on("click", ".submit-source .remove-source", function() { 
 
\t i--; 
 
\t $(this).parent().remove(); 
 
\t \t \t \t 
 
\t if (i == 4) { 
 
\t \t $(".submit-source .add-source").hide(); 
 
\t } 
 
\t else { 
 
\t \t $(".submit-source .add-source").show(); 
 
\t } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="submit-source"> 
 
\t <span>Add up to 4 different sources.</span> 
 
\t <div id="source-wrap-1" class="source-wrap" > 
 
\t \t <input name="source-1" type="text"/> 
 
\t </div> 
 
\t <span class="add-source">add input</span> 
 
</div>

私が午前問題は、4つのdivタグが生成され、ユーザは、第二または第三1を削除し、新しいものを生成している場合、たとえば、彼が2で終わる、ということです同じIDを持つdiv（これらのdiv内の入力名も同じです）。

スクリプトを改善して、生成された入力が以前の入力が存在するかどうかを確認するにはどうすればよいですか？たとえば、このソースコードがすでに存在する場合は新しい＃source-wrap-4を生成しませんが、このdivが存在しないか削除されている場合は＃source-wrap-3を生成します。

＃source-wrap-4（および入力名はsource-4）を過ぎたくないので、データを取得するときに簡単に入力を処理できます。

ありがとうございました！

Answer 1

利用可能なIDを配列に保持することで、必要でないものを再利用しないようにすることができます。

また、if/thenロジックは追加機能と削除機能の両方で同一であるため、重複を排除するために分離されています。

// Store available ids 
 
var availableIDs = [2,3,4]; 
 

 
const NOT_AVAIL = "ID_UNAVAILABLE"; 
 

 
// This function returns the first element in the aray 
 
// If the array no longer has any available elements, 
 
// it returns "ID_UNAVAILABLE". You can incorporate that 
 
// into the code to ensure that only 4 elements can be made at max 
 
function getID(){ 
 
    if(availableIDs.length > 0){ 
 
    // return the first element in the array and remove that element 
 
    // from the array 
 
    return availableIDs.shift(); 
 
    } else { 
 
    return NOT_AVAIL; 
 
    } 
 
} 
 

 
$(".submit-source .add-source").click(function() { 
 
    // Get the next available ID 
 
    var newID = getID(); 
 
    
 
    // As long as the new ID is not "ID_UNAVAILABLE", proceed: 
 
    if(newID !== NOT_AVAIL){ 
 
\t source = $('<div id="source-wrap-' + newID + 
 
         '" class="source-wrap" ><input name="source-' + newID + 
 
         '" type="text"/><span class="remove-source">remove</span></div>'); 
 
    
 
\t source.insertAfter(".submit-source .source-wrap:last"); 
 
     
 
     var theID = $(source).attr("id"); 
 
     var theLastChar = theID[theID.length - 1]; 
 
     
 
     // Test new element 
 
     console.log("New element's ID is: " + theID, "Array now contains: " + availableIDs); 
 
     hideShow(); 
 
    } 
 
}); 
 

 
$(document).on("click", ".submit-source .remove-source", function() { 
 
    var theID = $(this).parent()[0].getAttribute("id"); 
 
    var theLastChar = theID[theID.length - 1]; 
 
    $(this).parent().remove(); 
 
    
 
\t availableIDs.push(theLastChar); 
 
    console.log("ID to be put back into array is: " + theLastChar, 
 
       "Array now contains: " + availableIDs); \t \t 
 
    hideShow(); 
 
}); 
 

 
// Common function used when adding and removing: 
 
function hideShow(lastChar){ 
 
    var $setToWorkOn = $(".submit-source .add-source"); 
 
    (availableIDs.length === 0) ? $setToWorkOn.hide() : $setToWorkOn.show(); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="submit-source"> 
 
\t <span>Add up to 4 different sources.</span> 
 
\t <div id="source-wrap-1" class="source-wrap" > 
 
\t \t <input name="source-1" type="text"/> 
 
\t </div> 
 
\t <span class="add-source">add input</span> 
 
</div>