javascript - How to add and remove HTML elements depending on number in input field - Stack Overflow

admin管理员组

文章数量:1314216

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

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

• javascript
• jquery
• html

Share Improve this question Follow asked Aug 12, 2016 at 15:27 LoekLoek 4,1352222 silver badges3535 bronze badges 1

• Seems @RobertBroden deleted his ment. Clearing the generated form fields is no issue, since they should not be sent to the server anyway. – Loek Commented Aug 12, 2016 at 15:35

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

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.

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

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

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.

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

本文标签： javascriptHow to add and remove HTML elements depending on number in input fieldStack Overflow