Question

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

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

即用户键入＆＃39; 5＆＃39;，生成5个新字段。如果用户将此号码调整为＆＃39; 3＆＃39;，则仍有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 example

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

Answer 2

if循环也应该是这样的while循环：

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

Answer 3

如果有人偶然发现想要将生成的表单保留在屏幕上并且只删除大于请求数量的那个问题的问题，这里有一种方法，它使用jQuery的过滤器来获取多余的表单组，然后删除他们。它还将索引信息移动到div上的data-属性，以演示如何扩展此属性以过滤其他属性而不将信息放入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++;
    }
  }
});

这是一个fiddle。您可以在生成的输入中输入文本，并注意在输入较小的数字后，它们仍保留在页面上仍然存在的表单中。

Answer 4

有一个解决方案取决于生成的i和可用元素数量之间的计数差异，类选择器，这个解决方案可以保证删除第一个元素：

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

});

这是documentation

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

4 个答案: