Question

我正在使用JavaScript和jQuery构建一个表单。我无法连接到任何服务器，因此我根本无法使用任何PHP脚本。

如何添加更多文本框并删除带有“添加更多”和“x”（删除）按钮的文本框，这些按钮也会增加ID，这样我就可以捕获与每个ID相关联的各个值，并在以后的变量中使用它们。 / p>

我已经看过并测试过几个动态添加更多文本框的工作示例，但它们没有递增ID

任何建议都会非常有用。

Answer 1

我已经使用了数据，因为您可以从中间删除任何输入框，还需要保持顺序计数

您可以按ID #count0，#count1获取您的元素...（确保您有一个空检查，就好像您要删除#count1所以它不会在那里）

＆＃13;

function addMore(){
  var inps = $('#wrapper > div:last').data('count')+1 || 0;
  $('#wrapper').append('<div data-count="'+inps+'"><input type=text id="count'+inps+'" class="inp"/> <a class=remove>X</a></div>');
}

$('#wrapper').on('click' , 'a.remove' ,function(){
  $(this).closest('div').remove();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=wrapper>
  </div>
<button id=add onclick="addMore()">Add More</button>

＆＃13;

Answer 2

function addMore(){
  var inps = $('#wrapper > div:last').data('count')+1 || 0;
  $('#wrapper').append('<div data-count="'+inps+'"><input type=text id="count'+inps+'" class="inp"/> <a class=remove>X</a></div>');
}

$('#wrapper').on('click' , 'a.remove' ,function(){
  $(this).closest('div').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=wrapper>
  </div>
<button id=add onclick="addMore()">Add More</button>

function addMore(){
  var inps = $('#wrapper > div:last').data('count')+1 || 0;
  $('#wrapper').append('<div data-count="'+inps+'"><input type=text id="count'+inps+'" class="inp"/> <a class=remove>X</a></div>');
}

$('#wrapper').on('click' , 'a.remove' ,function(){
  $(this).closest('div').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=wrapper>
  </div>
<button id=add onclick="addMore()">Add More</button>

function addMore(){
  var inps = $('#wrapper > div:last').data('count')+1 || 0;
  $('#wrapper').append('<div data-count="'+inps+'"><input type=text id="count'+inps+'" class="inp"/> <a class=remove>X</a></div>');
}

$('#wrapper').on('click' , 'a.remove' ,function(){
  $(this).closest('div').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=wrapper>
  </div>
<button id=add onclick="addMore()">Add More</button>

jQuery如何动态添加带增量ID的文本框？

2 个答案: