克隆的 div 没有正确地留在网格中

Question

所以我左边有一个按钮，右边有一个表单。如果您单击左侧的按钮，您最多可以创建 6 个表单。如果我在 html 中手动创建这些表格，一切都会正确显示。然而，由于我正在克隆它们，它们似乎表现得很奇怪。

例如，在大约第 4 个克隆中，按钮被按下而不是停留在左上角。

此外，每次克隆该部分时，我都会更新该部分的编号。但是如何让它们留在网格内以及如何让它们根据显示的数字保持升序？

谢谢！

var cloneIndex = 1;
var clones_limit = 5;
var cloned_nbr = $(".clonedInput").length-1; //Exclude Default (first) div 

function clone()
{
  if(cloned_nbr<clones_limit)
  {
    cloneIndex++;
    cloned_nbr++;

    var new_clone =  $(".clonedInput").first().clone();

    new_clone.attr("id", "clonedInput" +  cloneIndex);
    new_clone.find(".label-nbr").text(cloneIndex);
    new_clone.find(".category").attr("id","category"+cloneIndex);
    new_clone.show(".remove").attr("id","remove"+cloneIndex);
    new_clone.on('click', 'button.clone', clone);
    new_clone.on('click', 'button.remove', remove);

    $(".clone").before(new_clone);
  }
}
function remove(){
  if(cloneIndex>1){
    $(this).parents(".clonedInput").remove();
    cloned_nbr--;
  }
}
$(".clone").on("click", clone);

$(".remove").on("click", remove);

Answer 1

我在表格中添加了 id="formy"，然后使用 $("#formy").append(new_clone) 添加了克隆。这似乎使您的按钮保持在左上角并使克隆保持有序。

<form id="formy" onsubmit="return false" style="background:transparent; border-color:transparent;">

<div id="duplicater0" class="clone flavNameDescBox addnewflavorimg col-4" style="display:inline-block;"> 
    ADD ANOTHER FLAVOR PROFILE
    </div>

  <div id="clonedInput" class="clonedInput flavNameDescBox col-4" style="display:inline-block; clear:left;">
    <h3>Create Flavor</h3>
    <h4>Flavor profile <span class="label-nbr">1</span></h4>

    <fieldset>
      <input class="category" id="category1" placeholder="Your Web Site (optional)" type="url" tabindex="4" required>
    </fieldset>
    <fieldset>
      <textarea placeholder="Type your message here...." tabindex="5" required></textarea>
    </fieldset>
    <fieldset>
      <textarea class="textarea2" placeholder="Type your message here...." tabindex="5" required></textarea>
    </fieldset>

    <button class="remove">Remove</button>
  </div>
</form>

<script>

var cloneIndex = 1;
var clones_limit = 5;
var cloned_nbr = $(".clonedInput").length-1; //Exclude Default (first) div 

function clone()
{
  if(cloned_nbr<clones_limit)
  {
    cloneIndex++;
    cloned_nbr++;

    var new_clone =  $(".clonedInput").first().clone();

    new_clone.attr("id", "clonedInput" +  cloneIndex);
    new_clone.find(".label-nbr").text(cloneIndex);
    new_clone.find(".category").attr("id","category"+cloneIndex);
    new_clone.show(".remove").attr("id","remove"+cloneIndex);
    new_clone.on('click', 'button.clone', clone);
    new_clone.on('click', 'button.remove', remove);

    $("#formy").append(new_clone);
  }
}
function remove(){
  if(cloneIndex>1){
    $(this).parents(".clonedInput").remove();
    cloned_nbr--;
  }
}
$(".clone").on("click", clone);

$(".remove").on("click", remove);

</script>

克隆的 div 没有正确地留在网格中

Cloned divs are not staying in the grid correctly

javascript

grid

jquery

clone