javascript - 添加一个输入字段，循环它并将值输出到 div

Question

我有点生疏，所以这可能是一个简单的修复。我正在尝试获取通过“添加更多”按钮动态添加输入字段的代码。然后使用 jquery，代码循环获取输入字段的值并附加一个 div。这是我到目前为止所拥有的。

$(function() {
  $('.addurl').click(function() {
    $('.more').add('<input name="more" type="text" class="test">').appendTo('.more');
  });
  
  $('.more').on('change', function() {
    $('.test').each(function() {
      var test = $(this).val();
      alert(test);
      $("<div id='urlnm2'> URL:" + test + "</div>").appendTo($('#urlnm'));
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="url" name="url" type="text">
<div class="more"></div>
<button type="button" class="addurl">Add more</button>

问题是当我单击添加第一个输入字段时，我的输出是

网址1

网址2

这就是我想要的，但如果我添加第三个输入字段，我的输出是

网址1

网址2

网址2

网址3

这不是我想要的。我需要它是

网址1

网址2

网址3

请帮忙。我已经被这个问题困扰一天了。谢谢

Answer 1

您应该使用.empty()清除div的内容，然后使用.append()。

$(function() {
  $('.addurl').click(function() {
    $('.more').add('<input name="more" type="text" class="test">').appendTo('.more');
  });

  $('.more').on('change', '.test', function() {
    var container = $('#urlnm').empty();
    $('.test').each(function() {
      //if you want to use id, create a mechanism so that identifiers must be unique
      $("<span> URL:" + $(this).val() + "</div>").appendTo(container);
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="url" name="url" type="text" class="test">
<div class="more"></div>
<button type="button" class="addurl">Add more</button>
 <!-- Create this div -->
<div id="urlnm"></div>

另请注意:HTML 中的标识符必须是唯一的