How to add and remove HTML elements depending on the number in the input field

Question

I have a number input field in which the user can enter a number. Depending on this number, several new input fields are generated.

Currently, I have no problem adding fields if the new number entered by the user is higher than the previous one. I cannot remove the generated fields if the user puts a smaller number though.

Thus, the user enters in '5', which generates 5 new fields. If the user adjusts this number to "3", there are still 5 generated fields.

HTML input

<input type="number" class="form-control" name="amount_of_vote_groups" id="amount_of_vote_groups">

Javascript (jQuery)

var i = 1;
$('#amount_of_vote_groups').change(function () {
    while (i <= this.value) {
        $('#right-column').prepend(
                '<div class="form-group" id="generated-field-'+i+'">' +
                    // Some other stuff here
                '</div>'
        );
        i++;
    }
    if (this.value > i) {
        $('#right-column').remove('#generated-field-' + i);
    }
});

I know that I am doing something stupid with the operator remove, but I just can not understand. I am a real sucker in javascript;)

Answer 1

, - , , , , jQuery , . data- div, , , , div.

var currForms = 0;
$('#amount_of_vote_groups').change(function() {
  var numForms = this.value;
  if (currForms > numForms) {
    $('#right-column .form-group').filter(function(index, ele) {
        return $(ele).data('index') >= numForms;
    }).remove();
    currForms = numForms;
  } else {
    while (currForms < numForms) {
      $('#right-column').append(
        '<div class="form-group" data-index="' + currForms + '">' +
        'Field ' + currForms + ':<input type="text">' +
        '</div>'
      );
      currForms++;
    }
  }
});

fiddle. , , .

Answer 2

:

$('#amount_of_vote_groups').change(function() {
  $('#right-column div.form-group').remove();
  for (var i = 1; i <= this.value; i++) {
    $('#right-column').prepend(
      '<div class="form-group" id="generated-field-' + i + '">div</div>'
    );
  }
});

jsFiddle

, , divs, , , .

Answer 3

The if loop should also be a while loop as follows:

while (this.value > i) {
  $('#right-column').remove('#generated-field-' + i);
  i--;
}

Answer 4

The solution depends on the difference in counting between the generated one iand the number of available elements, the class selector, this solution is guaranteed when the first element is deleted:

 var i = 1;
$('#amount_of_vote_groups').change(function () {
    while (i <= this.value) {
        $('#right-column').prepend(
                '<div class="form-group" id="generated-field-'+i+'">' +
                    '<input type="text" value="'+i+'" />'+
                '</div>'
        );
        i++
    }
  //alert($(this).val())
    if ((i-1) > $(this).val()) {

       // alert($('.form-group').size()+"***"+i)
      beDel = i - $('.form-group').size();
      for (j =0; j < beDel; j++){
        $('.form-group:first').remove();
      }
      --i;
    }

});

it DEMO