ユーザーが金額を指定したときに要素を動的に複製しますか？ - JavaScript + HTML

Question

<input>ボックスに、複製してページに追加する要素の量を入力することはできますか？

問題は、ユーザーが現在クローンされる要素の量を指定すると、要素の数が2番目のクリックで複製される要素の数よりも多いことです。また、元のHTMLやCSS内の要素を隠すことは可能ですか？下記のコードとJsFiddle Linkを添付してください。 HTMLとJavascriptのhttps://jsfiddle.net/j4jmyh0q/

Answer 1

わずかな微調整：のみ最初の

$('.col:first').hide(); 
$("#btn").click(function() { 
    var number = $("#member").val(); 
    var e = $('.col:first'); 
    $('.col').not('.col:first').remove(); 
    for (i=0;i<number;i++) { 
     e.show().clone().insertAfter(e); 
    } 
    $('.col:first').hide(); 

}); 

デモのクローンを作成する

$("#btn").click(function() { 
 
    var number = document.getElementById("member").value; 
 
    var e = $('.col'); 
 
    for (i=0;i<number;i++) { 
 
     e.clone().insertAfter(e); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Specify Amount of Member Cards Required:<input placeholder="e.g. 2" type="text" id="member" name="member" value=""> 
 
<button id="btn" onclick="addinputFields()">Go</button> 
 

 
<div> 
 

 
</div> 
 
<br> 
 
<div class="col">Member Card</div>

Answer 2

使用:firstセレクタ。

以下のコードのjsfiddle exampleを追加しました。

HTML

Specify Amount of Member Cards Required: 

<input placeholder="e.g. 2" type="text" id="member" name="member" value=""> 
<button id="btn">Go</button> 

<div id="colTemplate" class="col">Member Card</div> 
<div id="container"></div> 

CSS

/* hide the template */ 
#colTemplate { opacity: 0; visibility: hidden; } 

Javascriptを

$('#btn').click(() => { 
    let number = document.getElementById('member').value, 
     container = $('#container'), 
     template = $('#colTemplate'), 
     currentNumber = container.children().length; 

    if (currentNumber < number) { 
    // Add clones 
    for (let i = 0; i < number - currentNumber; i++) { 
     let clone = template.clone(true); 
     clone.attr('id', null); // Remove the id from the clone 
     container.append(clone); 
    } 
    } else if (number < currentNumber) { 
    // Remove extras 
    let extras = $('#container .col'); 
    for (let i = currentNumber - 1; i > number - 1; i--) { 
     extras.eq(i).remove(); 
    } 
    } 
});