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

Answer 3

In case someone stumbles along this question that wants to keep the generated forms already on the screen and only remove those that are greater than the requested number, here is an approach that uses jQuery's filter to get the excess form groups, then removes them. It also moves index information to a data- attribute on the div to demonstrate how you might be able to expand on this to filter on other attributes without putting information into a div id.

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

Here's a fiddle . You can enter text in the generated inputs, and notice they remain for forms that are still on the page after entering in a lower number.

Answer 4

There is a solution depends on the difference of count between the i generated and the count of available elements, the class selector, this solution is assured from deleting the first element:

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

});

This is a DEMO