Что мне не хватает в следующем коде для Javascript Clone? - PullRequest
0 голосов
/ 07 марта 2019

Мой проект о клонировании на стороне клиента, но сталкивается с проблемами, так как я новичок в этом.Ниже приведен пример кода, отображающий поля, но не функционирующий должным образом. Пожалуйста, дайте мне знать, что мне здесь не хватает ...

Пример взят по следующей ссылке: https://jsfiddle.net/kamalswami/0ed94p74/1/

$(document).ready(function() {
  var div_clone = null;
  div_clone = $('.template').clone();
  $('.button-add').click(function() {
    //we select the box clone it and insert it after the box
    var _elm = div_clone.clone();
    _elm.find('.box-title').html('Other Address');
    _elm.find("input[type='text']").val("");
    _elm.find('.remove_btn').show();
    _elm.appendTo('#clone_here');
  })

  $(document).on("click", ".remove_btn", function(e) {
    var $e = $(e.currentTarget);
    $e.closest('.template').remove();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<input class="button-add" type="button" value="Clone box">
<div class="form-group box template">
  <div class="col-lg-7">
    <p>Article</p>
    <select class="form-control" name="article()">
      <option value="">Smoki Coko Kokos</option>
      <option value="8">Koka Kola</option>
      <option value="10">Cipiripi</option>
    </select>
  </div>
  <div class="col-lg-3">
    <p>Quantity</p>
    <input class="form-control" value="3" name="qty()" type="text">
  </div>
  <div class="col-lg-2">
    <input style="display:none;" class="remove_btn" type="button" value="Delete box">
  </div>
</div>
<div id="clone_here">
</div>
...