一次添加一個div或刪除重複的字段

我有一個項目的一部分，我正在處理其中必須添加同一個div的重複實例。然而，它主要工作，而不是添加個別實例，以前的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(); 
    }); 
});

來源

2016-02-06 ChriChri

避免克隆'html'。點擊生成html添加更多。 –

你能給我更多的細節嗎？我假設你需要把HTML作爲一個變量在jQuery中，然後添加，每次 – ChriChri

，因爲你需要在最後添加新行，你需要做

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

您不需要做++i用於更改每個id或value屬性，只是爲每個事件增加一次。工作小提琴here。

來源

2016-02-06 14:15:31

非常感謝你:)我只是用名稱替換價值，它是完美的。 :) – ChriChri

一次添加一個div或刪除重複的字段

回答

相關問題