javascript - 一次添加一个 div，或删除重复字段

Question

我有一个正在处理的元素的一部分，我必须在其中添加相同 div 的重复实例。但是，它主要起作用，而不是添加单个实例，添加的先前 div 似乎在重复自身，而不是添加“原始 div”。

这是 jsfiddle连同我目前使用的代码:

 <div class="shape" id="plan4_shape">
         <span class="bakkant">
         <input class="measures" id="plan4_width" placeholder="mm" name="p4width" value="w1"/>
         <span class="times"> &times;</span>
         <input class="measures" id="plan4_width" placeholder="mm" name="p4length" value="l1" />
         </span>
          <script id="template" type="text/template">
             <span class="bakkant" id="bakkant">
             <input class="measures" id="plan4_width" placeholder="mm" name="p4width" value="w"/>
             <span class="times"> &times;</span>
             <input class="measures" id="plan4_width" placeholder="mm" name="p4length" value="l" />
             <button class="close" id="close">&times;</button>
             </span>
            </script>
            <button type="button" name="add_row" class="addrow" id="addrow4" onClick="addrow()">Add row</button>
            <textarea name="more_info" id="profiles" placeholder="Beskriv fritt, vilka kanter du vill få profilerade."></textarea>
</div>

jQuery 代码

$(function() {
  var i = 0;
  $('#addrow4').click(function() {
    var $clone = $($('#template').html());
    $clone.attr('id', "bakkant" + ++i);
     $clone.find('p').attr("Bob" + ++i)
    $clone.find('input').attr('value', "l" + ++i);
    $clone.find('input').attr('value', "w" + ++i);
    $('.bakkant').append($clone);
  });

  $('.shape').on('click', '.close', function() {
    $(this).closest('.bakkant').remove();
  });
});

Answer 1

因为你需要在最后添加新行，所以你需要做

 $('.bakkant').last().append($clone);

您无需执行 ++i 来更改每个 id 或 value 属性，只需为每个事件递增一次即可。

工作 fiddle here .