動的に生成された入力ボックスのサイズ変更と位置とサイズのリフレッシュ

Question

フォームの中にボタンと入力フィールドがあります。ボタンをクリックすると「MORE FIELDS」が表示されます新しい動的に生成された入力ボックス。私はposted code in jsfiddleを使用してみました、これは動作しますが、私はこの写真のように取得する必要があります。

だから私は、この絵のように配置された入力フィールドを取得する必要があります： を - 1箱がその行に追加された場合それは幅を得る：200px; - 2つのボックスを1つの行に追加すると、ボックスの幅は100px になります。ボックスをクリックして削除すると、ボックスが削除されたときにボックスを削除する必要があります。私はすべてのボックスを同じ位置に再整列したいと思います（ここではボックス3が削除され、4はその場所をとり、6は小さくなり、5は左に移動します）。

私はjsfiddleに以下のコードを使用してみましたが、私はいくつかのCSSとjQueryの必要があると思う：

$(document).ready(function() { 
    var max_fields  = 10; //maximum input boxes allowed 
    var wrapper   = $(".input_fields_wrap"); //Fields wrapper 
    var add_button  = $(".add_field_button"); //Add button ID 

    var x = 1; //initlal text box count 
    $(add_button).click(function(e){ //on add input button click 
    e.preventDefault(); 
    if(x < max_fields){ //max input box allowed 
     x++; //text box increment 
     $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box 
    } 
    }); 

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text 
    e.preventDefault(); $(this).parent('div').remove(); x--; 
    }) 
}); 

〜おかげ

Answer 1

TL; DR：あなたが適用するために必要なのでbasicly https://jsfiddle.net/6b24z4j7/4/

を入力の表示順序を維持するためのn番目の子CSSロジック。私はjQueryを少し変更しましたが、それでもあなたのロジックは維持されています。フィーリンの例では、プレースホルダ属性を使用して、どのように動作するかを示しました（後で削除できます）。

CSS：

*{ 
    padding: 0; 
    margin: 0; 
    box-sizing: border-box; 
} 
.form{ 
    width: 400px; 
    max-width: 90%; 
    margin: 20px auto; 
    padding: 20px; 
    background-color: #fff; 
    border: 1px solid #e2e2e2; 
    border-radius: 15px; 
} 
.form__actions{ 
    text-align: center; 
} 
.form__button{ 
    display: table; 
    margin: 0 auto 15px; 
    padding: 6px; 
    color: #fff; 
    background: #3498db; 
    border: none; 
    border-radius: 4px; 
    cursor: pointer; 

    -webkit-appereance: none; 
    -moz-appereance: none; 
    -ms-appereance: none; 
    appereance: none; 
} 
.form__row{ 
    margin: 0 -10px; 
} 
.form__row:before, .form__row:after{ 
    content: ''; 
    display: table; 
    clear: both; 
} 
.form__field{ 
    float: left; 
    padding: 0 10px; 
    margin: 0 0 25px; 
    position: relative; 
} 
.form__field:nth-child(2n-1){ 
    width: 50%; 
} 
.form__field:nth-child(2n){ 
    width: 50%; 
} 
.form__field:nth-child(3n){ 
    width: 100%; 
} 
.form__field:hover .form__removeField{ 
    opacity: 1; 
} 
.form__removeField{ 
    position: absolute; 
    top: -10px; 
    right: 20px; 
    width: 20px; 
    height: 20px; 
    opacity: 0; 
    background: #e74c3c; 
    color: #fff; 
    line-height: 20px; 
    text-align: center; 
    font-size: 14px; 
    border-radius: 50%; 
    cursor: pointer; 

    -webkit-transition(all .4s ease); 
    -moz-transition(all .4s ease); 
    -ms-transition(all .4s ease); 
    transition(all .4s ease); 
} 
.form__input{ 
    display: block; 
    width: 100%; 
    background: #fff; 
    padding: 0 10px; 
    line-height: 32px; 
    border: 1px solid #888; 
    border-radius: 5px; 
    -webkit-appereance: none; 
    -moz-appereance: none; 
    -ms-appereance: none; 
    appereance: none; 
} 

JS（jQueryの）：

$(document).ready(function() { 
    var max_fields  = 10; //maximum input boxes allowed 
    var wrapper   = $(".input_fields_wrap"); //Fields wrapper 
    var add_button  = $(".add_field_button"); //Add button ID 
    var count   = $(".input_fields_wrap").find('.form__field').length; //or write a static number if you know how many fields you will have 

    $(add_button).click(function(e){ //on add input button click 

    e.preventDefault(); 
    if(count < max_fields){ //max input box allowed 
     count++; //text box increment 
     $(wrapper).append('<div type="text" class="form__field"><input type="text" class="form__input" placeholder="'+count+'"><div class="form__removeField remove_field">x</div></div>'); //add input box 
    } 
    }); 

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text 
    e.preventDefault(); 
    $(this).parent('div').remove(); 
    count--; 
    }) 
}); 

HTML：

<form class="form"> 
    <div class="form__actions"> 
    <button class="form__button add_field_button">Add input</button> 
    </div> 
    <div class="form__row input_fields_wrap"> 
    <div type="text" class="form__field"> 
     <input type="text" class="form__input"> 
     <div class="form__removeField remove_field">x</div> 
    </div> 
    <div type="text" class="form__field"> 
     <input type="text" class="form__input"> 
     <div class="form__removeField remove_field">x</div> 
    </div> 
    <div type="text" class="form__field"> 
     <input type="text" class="form__input"> 
     <div class="form__removeField remove_field">x</div> 
    </div> 
    </div> 
</form> 

Hopefilly、私はあなたの入力の作成/削除の背後にあるロジックを理解していました。