Javascript 添加输入表单并再次删除它们获取所有id'；s

我目前正在向div添加一些输入字段。还可以选择删除刚刚添加的输入字段

现在的问题是，如果你添加4个输入字段，假设你删除了第2个

你会得到这样的结果

id=1

id=3

id=4

现在，当您添加一个新的时，它将添加id=5

因此，我们最终得出以下结论：

id=1

id=3

id=4

id=5

JS:

     var iArtist = 1,
         tArtist = 1;
 $(document).on('click', '#js-addArtist', function() {
   var artist = $('#js-artist');
   var liData = '<div class="js-artist"><input id="artiestNaam_' + iArtist + '"><input id="artiestURL_' + iArtist + '"><span class="js-removeArtist">remove</span></div>';
   $(liData).appendTo(artist);
   iArtist++;
   tArtist++;
 });
 $(document).on('click', '.js-removeArtist', function() {
   if (tArtist > 1) {
     $(this).parents('.js-artist').slideUp("normal", function() {
       $(this).remove();
       tArtist--;
     });
   }
 });
 $(document).on('click', '#js-print', function() {
  var historyVar = [];
    historyVar['artiestNaam_0'] = $('#artiestNaam_0').val();
    historyVar['artiestURL_0'] = $('#artiestURL_0').val();
  console.log(historyVar); 
 });

<span id="js-addArtist">add</span>
<div id="js-artist">
  <div class="js-artist">
    <input id="artiestNaam_0">
    <input id="artiestURL_0">
    <span class="js-removeArtist">remove</span>
  </div>
</div>
<span id="js-print">print</span>

如何确保获取所有输入字段的数据

您可以使用

each（）

函数使用class

js artist

遍历所有div：

$('.js-artist').each(function(){
  var artiestNaam = $('input:eq(0)',this);
  var artiestURL = $('input:eq(1)',this);

  historyVar[artiestNaam.attr('id')] = artiestNaam.val();
  historyVar[artiestURL.attr('id')]  = artiestURL.val();
});

希望这有帮助

---

var iArtist=1，
鞑靼人=1；
$（文档）.on（'click'，'js addArtist'，function（）{
var-artist=$（“#js-artist”）；
var liData='删除'；
$（liData）。附录（艺术家）；
iArtist++；
鞑靼人++；
});
$（document）.on（'click'，'js removeArtist'，function（）{
如果（鞑靼人>1）{
$（this）.parents（'.js artist'）.slideUp（“normal”，function（））{
$（this.remove（）；
鞑靼人--；
});
}
});
$（文档）。在（'click'，'js print'，函数（）上{
var historyVar=[]；
$（'.js-artist'）。每个（函数（）{
var artiestNaam=$（'input:eq（0）'，这是）；
var artiestURL=$（'input:eq（1）'，这是）；
历史变量[artiestNaam.attr（'id'）]=artiestNaam.val（）；
historyVar[artiestURL.attr（'id'）]=artiestURL.val（）；
});
console.log（historyVar）；
});

添加
去除
打印
初始化计数变量。这样，如果一个输入字段被删除，一个新的id仍然会被初始化。为了获得每个元素的数据，jQuery有一个方便的
函数来迭代所有元素

希望这有帮助


count=0；
$（“#添加”）。在（“单击”，函数（）{
计数++；
$（“body”）.append（“您可以使用更少的代码。例如，我将使它比您的问题更简单，但原则保持不变：

<input name="artiest_naam[]" />
<input name="artiest_naam[]" />
<input name="artiest_naam[]" />

如果我添加和删除100个输入，保留3个随机输入并提交，结果仍然是这样。代码将为您计数。

不错的奖励：如果您添加了一些javascript，可以更改输入的顺序，它将按照用户放置的顺序（例如，如果我更改了编号2和编号3，我的结果将是“一、三、二”）。
您是否需要提交表单以使用该数组，或者是否还有其他解决方案？artiest_naam=$（）输入[name='artiest\u naam\[\]']'）.map（函数（）{return$（this.val（）；}）.get（）；工作正常谢谢！
<input name="artiest_naam[]" />
<input name="artiest_naam[]" />
<input name="artiest_naam[]" />

$_POST['artiestnaam'] = array(
   [0] => "whatever you typed in the first",
   [1] => "whatever you typed in the second",
   [2] => "whatever you typed in the third"
)