使用Javascript/Jquery删除后无法创建多个文本区域

我需要一些帮助。我正在使用

+

按钮创建多个TexArea，并使用

-

按钮删除，但我遇到了一些问题

这是我的代码：

<div class="col-md-3">
    <div class="form-group">
      <label for="ques">No of questions</label>
      <input name="no_of_question" id="ques" class="form-control" placeholder="no of question" value="" type="text">


      <div id="err_msg_name" style="font-size:12px; color:#FF0000; text-align: center;"></div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-8">
      <div class="form-group">
        <label>Questions</label>
        <input type="button" style="line-height:13px; margin-right:2px;" class="btn btn-success btn-sm" name="plus" id="plus" value="+" onClick="addQuestionField();">
        <input type="button" style="line-height:13px; margin-right:2px;" class="btn btn-danger btn-sm" name="minus" id="minus" value="-" onClick="deleteQuestionField();">
      </div>
    </div>

  </div>
  <div id="container">
    <div class="col-md-4">
      <div class="form-group">
        <textarea class="form-control" name="questions0" id="questions0" placeholder="Questions" style="background:#FFFFFF;" rows="2"></textarea>
      </div>
    </div>
  </div>
  <script>
    function addQuestionField() {
      var get = $("#ques").val();
      console.log('ques', get);
      for (var i = 1; i < get; i++) {
        $('#container').append('<div class="col-md-4 dyn"><div class="form-group"><textarea class="form-control" name="questions' + i + '" id="questions' + i + '" placeholder="Questions" style="background:#FFFFFF;" rows="2"></textarea></div></div>')
      }
    }

    function deleteQuestionField() {
      var textareas = $('#container .dyn');
      if (textareas.length !== 0) {
        textareas.last().remove();
        $('#ques').val(textareas.length - 1);
      }
    }
  </script>

没有问题
问题
函数addQuestionField（）{
var get=$（“#ques”）.val（）；
console.log（'ques'，get）；
for（var i=1；i

基本上，我需要做的是根据第一个文本框中输入的数字，向页面添加具有唯一id的新文本区域，并按此id排序。页面中应始终有一个默认文本区域

因此，例如，如果我在文本框中输入

3

，则应添加2个文本区域，如果我输入

5

，则应添加4个文本区域，等等

但是上面的代码工作不正常：例如，我在第一个文本框中输入了

2

，然后单击

+

按钮-正在创建一个文本区域并将其添加到页面中（很好），第二次也是一样，但第三次它不再工作，正在创建一个额外的文本框

（例如：我输入了

3

数字，添加了3个新的文本区域+默认值=4，但我只需要3-如文本框中输入的）

---

我的完整密码

您正在使用for循环，因为索引从1开始，所以您应该使用“

• 您的代码是完美的。创建更多框的原因是因为在您的代码中已经存在一个表单区域，除了一个文本区域之外，还创建了您指定的文本区域的数量
• 例如，当您在文本框中输入5进行创建时，屏幕加载时已经存在一个文本区域。屏幕上显示5+1文本区域
• 如果删除现有的文本区域，您将能够看到屏幕上指定的文本区域的确切数量

---

• 此外，如果您将限制更改为，OP声称，他还需要连续保留文本区域的id和名称
  在添加新的textarea之前，我们将删除之前添加的所有textarea

  function addQuestionField() {
    var get = $("#ques").val();
    var count=$('textarea').length -1 ;
    for (var i = 0; i < count; i++) {
     $('#container').find('.col-md-4').last().remove();
    }
    for (var i = 1; i < get; i++) {
     $('#container').append('<div class="col-md-4 dyn"><div class="form-group"><textarea class="form-control" name="questions' + i + '" id="questions' + i + '" placeholder="Questions" style="background:#FFFFFF;" rows="2"></textarea></div></div>')
    }
  }
  

  ---

  一个可工作的plunker代码。
  做一个小改动，它将在输入字段中添加相同的文本区域（包括现有区域）

  函数addQuestionField（）{
  var get=$（“#ques”）.val（）；
  var noOfTextArea=$（'textarea'）。长度；
  如果（获取>noOfTextArea）{
  get=get-noOfTextArea；
  对于（var i=1；i请尝试以下代码
  
  function addQuestionField() {
    var get = $("#ques").val();
    var textlen = $('textarea').length;
  
    get = get - textlen;
  
    //console.log('ques', get);
    for (var i = 0; i < get; i++) {
      $('#container').append('<div class=col-md-4 dyn><div class=form-group><textarea class=form-control name=questions"+i+" id=questions"+i+" placeholder="Questions" style="background:#FFFFFF;" rows="2"></textarea></div></div>')
    }
  }
  
  function deleteQuestionField() {
    var textareas = $('textarea');
    if (textareas.length !== 0) {
      textareas.last().remove();
      $('#ques').val(textareas.length - 1);
    }
  }
  
  函数addQuestionField（）{
  var get=$（“#ques”）.val（）；
  var textlen=$（'textarea'）。长度；
  get=get-textlen；
  //console.log（'ques'，get）；
  for（var i=0；i
  始终设法获取新id
  
  
  var idGernator=（函数（）{
  var-id=10；
  返回函数（）{
  返回id++；
  }
  })();
  函数addQuestionField（）{
  var get=$（“#ques”）.val（）；
  //console.log（'ques'，get）；
  //var textareas=$（'#container.dyn'）；
  //console.log（'text'，text区域）；
  //var get=$（“#ques”）.val（）-1；
  对于（var i=1；i No，它将创建更多输入值。在Plunk中，如果输入3，则只追加3个文本区域。如果输入2，则另输入2，再次输入3，则下一个3将追加。是的，这就是问题所在。问题总数字段应与
  No of questions
  字段值中输入的值相同。在这种情况下，将get值设为
  -1
  即
  get=get-1
  。我在你的plunker中测试过，如果你输入3，然后包括默认值1，它将再添加2个文本区域。下面添加了答案。是的，我已经有了一个，然后我需要创建额外的。顺便说一句，我必须如何创建以前输入的问题数量字段。我不知道ant删除现有的文本区域。好的，当我在创建文本框时检查机器上的代码时，不是例如添加5，而是只添加4，这是因为给出了<条件，而不是如果从
  i=0开始，则前两个文本区域
  名称和id
  将与我创建的相同不需要。我不确定我是否理解你的问题，你能再解释一遍吗？我的问题是假设用户首先输入
  2
  并创建了2个文本区域，包括现有的一个。假设用户输入
  3
  它正在创建
  4
  它应该在其中创建
  3
  文本区域，包括现有的一个。你的问题是第一次它正常工作，但每次都会创建一个额外的文本区域？是的，这是真的。假设用户需要创建3，但创建错误
  2
  ，那么它应该会更改。首先输入2并创建，然后输入
  3
  它应该创建3。我已经更新了我的答案，请查看。请删除所有的alerts。
  function deleteQuestionField() {
    var textareas = $('textarea');
    if (textareas.length !== 0) {
      textareas.last().remove();
      $('#ques').val(textareas.length - 1);
    }
  }
  
  function addQuestionField() {
    var get = $("#ques").val();
    var noOfTextArea = $('textarea').length;
  
    if(get > noOfTextArea){
      get = get - noOfTextArea;
  
      for (var i = 1; i <= get; i++) {
        $('#container').append('<div class="col-md-4 dyn"><div class="form-group"><textarea class="form-control" name="questions' + i + '" id="questions' + i + '" placeholder="Questions" style="background:#FFFFFF;" rows="2"></textarea></div></div>')
      }
    }else{
      get = noOfTextArea - get;
      for (var i = 1; i <= get; i++) {
        $('#container').find('.col-md-4').last().remove();
      }
    }
  }
  
  function addQuestionField() {
    var get = $("#ques").val();
    var textlen = $('textarea').length;
  
    get = get - textlen;
  
    //console.log('ques', get);
    for (var i = 0; i < get; i++) {
      $('#container').append('<div class=col-md-4 dyn><div class=form-group><textarea class=form-control name=questions"+i+" id=questions"+i+" placeholder="Questions" style="background:#FFFFFF;" rows="2"></textarea></div></div>')
    }
  }
  
  function deleteQuestionField() {
    var textareas = $('textarea');
    if (textareas.length !== 0) {
      textareas.last().remove();
      $('#ques').val(textareas.length - 1);
    }
  }