jQuery点击按钮克隆元素时如何避免复制input输入框内的已有值

解决方案 #

jQuery的.clone()方法会完整复制目标元素的实时DOM状态，包括用户输入的表单值、选中的单选/复选状态等交互内容，所以会出现克隆元素携带原有输入框内容的问题，只需在插入克隆元素前清空内部对应表单元素的值即可，修改后的代码如下：

$(function(){
  $(".btn-copy").on('click', function(){
    var ele = $(this).closest('.example-2').clone(true);
    // 清空新克隆节点内的输入框内容
    ele.find('input.form-control').val('');
    $(this).closest('.example-2').after(ele);
  })
})

如果后续需要兼容更多表单元素（单选框、复选框、下拉选择框）的清空需求，可以使用通用表单清空逻辑：

$(function(){
  $(".btn-copy").on('click', function(){
    var ele = $(this).closest('.example-2').clone(true);
    // 清空所有可输入表单元素状态，排除按钮、隐藏域等无需清空的元素
    ele.find(':input').not(':button, :submit, :reset, :hidden')
      .val('')
      .prop('checked', false)
      .prop('selected', false);
    $(this).closest('.example-2').after(ele);
  })
})

以上修改不会影响原有克隆逻辑的事件绑定效果，也不会改动原有已填写的输入框内容。

内容的提问来源于stack exchange，提问作者Aazim Khaki