Question

我有一个表单，在该表单中是一个按钮和一个输入字段，我希望当有人点击“ADD MORE FIELDS”按钮时会有一个新的动态生成的输入框。我尝试使用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

TL; DR：https://jsfiddle.net/6b24z4j7/4/

所以基本上你需要应用一些n-child 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，我理解输入创建/删除背后的逻辑。

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

1 个答案: