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

【问题标题】：Can not create multiple text area after deleting using Javascript/Jquery使用 Javascript/Jquery 删除后无法创建多个文本区域
【发布时间】：2016-11-08 19:02:51
【问题描述】：

我需要一些帮助。我正在使用 + 按钮创建多个 texareas 并使用 - 按钮删除，但我遇到了一些问题。

这是我的代码：

<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>

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

例如，如果我在文本框中输入3，则应添加2个文本区域，如果我输入5-应添加4个文本区域等。

但是上面的代码不能正常工作：例如我在第一个文本框中输入2并点击+按钮-正在创建1个文本区域并添加到页面（什么是好的），同样第二次的事情，但第三次它不再工作了，正在创建一个额外的文本框。

（例如：我输入了3 数字，并且正在添加3个新文本区域+默认的一个= 4，但我只需要在文本框中输入的3-）

我的完整 plunker 代码 here。

【问题讨论】：

在您的插件中，如果您输入 3，则仅附加 3 个文本区域。如果你输入 2 ，再输入 2 ，再输入 3 ，接下来的 3 是追加的。
是的，这就是问题所在。问题字段总数应与no of questions字段值中输入的值相同。
在这种情况下，获取值-1即get = get - 1。
我在你的plunker中测试过，如果你做get = get - 1，那么，如果你输入3，那么包括默认的1，它会增加2个文本区域。
在下面添加了答案。

标签： javascript jquery

【解决方案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>')
  }
}

我还注意到它弄乱了deleteQuestionField 函数，您应该将其更正如下：

function deleteQuestionField() {
  var textareas = $('textarea');
  if (textareas.length !== 0) {
    textareas.last().remove();
    $('#ques').val(textareas.length - 1);
  }
}

一个有效的 plunker 代码here。

【讨论】：

如果你是从i=0开始，第一个两个文本区name and id 会和我不需要的一样。
我不确定我是否理解你的问题，你能再解释一下吗？
我的问题是假设用户首先输入 2 并再次创建了 2 个文本区域，包括现有的一个假设用户输入 3 它正在创建 4 它应该创建 3 文本区域，包括现有一。
您的问题是第一次正常工作，但每次都创建一个额外的文本区域？
是的，确实如此。假设用户需要创建 3 却错误地创建了2 那么它应该改变。

【解决方案2】：

做一个小改动，它将在输入字段中添加相同的文本区域提及（包括现有的）。

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();
    }
  }
}

【讨论】：

先输入2并创建，再输入3应该会创建3。
我已经更新了我的答案，请看一下。并请删除所有警报。

【解决方案3】：

您正在使用从 1 开始索引的 for 循环，因此您应该使用 "

 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>')
      }

【讨论】：

不，它会创造更多的输入值。

【解决方案4】：

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

【讨论】：

是的，我已经有一个，然后我需要创建更多。顺便说一句，我必须如何创建之前输入的问题字段。我不想删除现有的文本区域。
好的，当我在创建文本框时检查我的机器上的代码时，而不是例如添加 5 个，只添加了 4 个，这是因为给出了

【解决方案5】：

试试下面的代码....

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);
  }
}

【讨论】：

【解决方案6】：

总是想办法获取新的 id，

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Hello</h1>
  <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>

【讨论】：