如何根据输入字段中的数字添加和删除HTML元素

Question

我有一个数字输入字段,用户可以在其中输入数字.根据此数字,将生成一些新的输入字段.

目前我添加字段没有问题,只要用户输入的新号码高于前一个号码.如果用户输入较低的数字,我无法删除生成的字段.

因此,即用户键入'5',这将生成5个新字段.如果用户将此数字调整为"3",则仍有5个生成的字段.

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

我知道我对这个remove陈述做了一些愚蠢的事情,但我无法理解它.我是javascript的真正傻瓜;)

Answer 1

我这样做:

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

每当您更改数字输入时,清除可能存在的任何div,然后旋转循环以添加新的div.