satya satya - 28 days ago 6
Javascript Question

Can not create multiple text area after deleting using Javascript/Jquery

I need one help. I am creating multiple text box using

+
button and deleting using
-
button. I am getting some issues here. First I am explaining my code below.

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


Here suppose I entered
2
in first textbox and clicked on
+
button then 2 question field is creating same time I entered
3
in first text box and again clicked on
+
button
4
question box are creating instead of 3. Here I need what ever the number entered into the first text area that number of question field will create with unique id as it explained. My full plunkr code is here.

Answer

As the OP claimed he also needs to keep the id and the name of the textareas serially.

Before adding the new textarea, we remove all the textareas that were added before.

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

I also noticed that it messed up the deleteQuestionField function, you should correct it as bellow:

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

A working plunker code here.