javascript - 带有空输入的 jQuery 克隆表单

Question

每次单击“添加”按钮时，我都想复制这个表单。在这种情况下，表单附加了先前的输入值。我希望每个表格单独工作。有没有办法为输入附加空值？

这是我的代码片段:

$(document).ready(function() {
  $(".Add").click(function() {
    $(".formi").eq(0).clone().show().insertAfter(".formi:last");
    
  });
  $('.all').on('click', ".cancel", function() {
      $(this).closest('.formi').remove();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
  <form class="formi">
    <input type="text" placeholder="name" value="Sarah" />
    <select name="cars">
      <option value="one">one</option>
      <option value="two">two</option>
    </select>
    <button type="submit">ok</button>
    <span class="cancel">Cancel</span>
  </form>
</div>

Answer 1

是的，只需在克隆副本中清除它们(参见 *** 行):

$(document).ready(function() {
  $(".Add").click(function() {
    $(".formi")
      .eq(0)
      .clone()
      .find("input").val("").end() // ***
      .show()
      .insertAfter(".formi:last");
    
  });
  $('.all').on('click', ".cancel", function() {
      $(this).closest('.formi').remove();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
  <form class="formi">
    <input type="text" placeholder="name" value="Sarah" />
    <select name="cars">
      <option value="one">one</option>
      <option value="two">two</option>
    </select>
    <button type="submit">ok</button>
    <span class="cancel">Cancel</span>
  </form>
</div>

该具体示例使用 find找到输入，val清除它的值，然后 end返回原始的克隆元素集，以便 show 和 insertAfter 在该集上运行(而不是输入)。