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

Question

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

Currently I have no problems adding fields, as long as the new number put in by the user is higher than the previous. I can't remove the generated fields if the user puts in a lower number though.

So i.e. a user types in '5', which generates 5 new fields. If the user adjusts this number to '3', there are still 5 generated fields.

Input HTML

<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 I'm doing something stupid with the remove statement, but I just can't it get figured out. I'm a real sucker at javascript ;)

Answer 1

I'd do it like this:

$('#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 example

Whenever you change the number input, clear out any divs that may exist, then spin through a loop to add the new ones.

Answer 2

The if loop should also be a while loop like this:

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