javascript - 如何在按钮单击时添加输入字段

Question

function add() {
  var new_chq_no = parseInt($('#total_chq').val()) + 1;
  var new_input = "<input type='text' id='new_" + new_chq_no + "'>";
  $('#new_chq').html(new_input);
}

function remove() {
  var last_chq_no = $('#total_chq').val();
  if (last_chq_no > 1) {
    $('#new_' + last_chq_no).append('');
    $('#total_chq').val(last_chq_no - 1);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
<button onclick="add()">Add</button>
<button onclick="remove()">remove</button>
<div id="new_chq"></div>
<input type="hidden" value="1" id="total_chq">

它一次添加输入字段，第二次单击它不添加任何内容，并且删除按钮不起作用

标签： javascriptjquery

Answer 1

工作小提琴。

您必须在附加元素时使用.append()而不是：.html()

$('#new_chq').append(new_input);

最好在 JS 代码中附加事件，例如：

$('.add').on('click', add);
$('.remove').on('click', remove);

注意 1：不要忘记增加计数器#total_chq：

$('#total_chq').val(new_chq_no);

注意 2：.remove()如果要删除元素，则必须使用。

$('.add').on('click', add);
$('.remove').on('click', remove);

function add() {
  var new_chq_no = parseInt($('#total_chq').val()) + 1;
  var new_input = "<input type='text' id='new_" + new_chq_no + "'>";

  $('#new_chq').append(new_input);

  $('#total_chq').val(new_chq_no);
}

function remove() {
  var last_chq_no = $('#total_chq').val();

  if (last_chq_no > 1) {
    $('#new_' + last_chq_no).remove();
    $('#total_chq').val(last_chq_no - 1);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
<button class="add">Add</button>
<button class="remove">remove</button>
<div id="new_chq"></div>
<input type="hidden" value="1" id="total_chq">