javascript - 动态生成的输入框调整大小并刷新位置和大小

Question

我有一个表单，该表单内有一个按钮和一个输入字段，我希望当有人单击“添加更多字段”按钮时，将会有一个新的动态生成的输入框。我尝试使用 posted code in jsfiddle这可行，但我需要像这张照片一样:

所以我需要像这张图片那样定位输入字段:- 如果在行中添加一个框，那么它的宽度为:200px；- 如果连续添加两个框，则框的宽度为: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

长话短说:https://jsfiddle.net/6b24z4j7/4/

所以基本上你需要应用一些第 nth-child css 逻辑来维护输入的 View 顺序。我对 jQuery 做了一些小改动，但它仍然保持你的逻辑。在 fiddle 示例中，我制作了占位符属性来展示事物的工作原理(您可以稍后将其删除)。

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>

希望，我理解了您创建/删除输入背后的逻辑。