根据数字字段中的值添加或删除元素

Question

这是我到目前为止所尝试过的。

$("#add_row").change(function(){

    $(".box").append('test <br />');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="form-control input-sm" id="add_row" type="number">
 
 <div class="box"></div>

现在我想根据数字字段中的数字添加或删除字段

Answer 1

一个非常基本的实现。但是，您可能希望引入输入清理，包括最大限制：

$("#add_row").change(function(){

    var total = $(this).val();
    for (i = 0; i < total; i++) {
      $(".box").append('test <br />');
    }

});

Answer 2

我在追加之前已经清空了box，因此无需担心价值下降

注意：您需要验证减去输入（不确定您的要求，但可以以不同的方式完成）

$("#add_row").change(function(){
	var total = $(this).val();
	var oldLength = $(".box > span").length;
	var change = total - oldLength;
	if (change > 0) {
		for (i = 0; i < change; i++) {
			$(".box").append('<span >test <br /></span>');
		}
	}
	else {
		change = Math.abs(change)
		$( ".box > span" ).each(function( index ) {				
			$(this).remove();
			if (index == (change -1)) {
				return false;
			}
		});
	}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="form-control input-sm" id="add_row" type="number">
 
 <div class="box"></div>