如何使用 jQuery 复制和清除表单元素？

Posted 2023-02-22

【中文标题】如何使用 jQuery 复制和清除表单元素？

【英文标题】：How to duplicate and clear a form element using jQuery?

【发布时间】：2011-11-19 11:53:24

【问题描述】：

如果我在表单中有以下 html：

<div class='example'>
   <div class='row'>
       <input name='first_field' type='text' value='Hello' />
       <input name='second_field' type='text' value='World!' />
   </div>
</div>

我如何去创建这个（第一个）“行”的副本，去掉值，以便在之后根据需要附加多个用户条目。值可能已经存在的原因（如本例所示）是针对正在编辑数据的情况。我想获得：

   <div class='row'>
       <input name='first_field' type='text' value='' />
       <input name='second_field' type='text' value='' />
   </div>

我的想法是这样的：

var row = $('.example').find('.row:first-child').clone(); 
row.find('[name]').each(function() 
  $(this).val('');
);

但这不起作用，因为它似乎没有删除值，也没有捕获外部 html（包装器）。

谁能给点建议？

谢谢。

【问题讨论】：

你在 ".row:first-child" 之后缺少一个 ' 吗？

【参考方案1】：

您的 js 中有语法错误。 .find('.row:first-child) 应该是 .find('.row:first-child')，但是对于克隆，默认行为是删除值。划掉那个...这显然只是为了克隆实际的输入元素。

http://jsfiddle.net/Yb2Ym/

var row = $('.example').find('.row:first-child').clone();  
row.find('[name]').each(function() 
  $(this).val('');
);
$(".row:last").after(row)