javascript - 如何使用 JQuery 清空克隆输入？

Question

我编写了一个脚本来克隆和重命名调查问卷中的输入字段。当我测试它时，我发现它还克隆了输入到字段中的信息。

我尝试使用 .val('') 和 .reset() 但它们都不起作用。经过一些研究后，我了解到这是因为我有输入字段的组合，并且它们并不完全适用于所有输入字段。因此，我决定创建一个“if”语句来更深入地研究，但这仍然没有清除克隆的输入。我检查了控制台，没有收到任何错误，所以我不知道出了什么问题。

这是代码

$("#p20_01_yes").click(function(){
var num = $('.clone_el').length,
newNum = new Number(num + 1),
clonedFieldset = $("#cloner").clone().prependTo("#page20");

clonedFieldset.attr('id',('cloner')+newNum).find("input, textarea, select, label, #cus_title").each(function() {
    var item = $(this),
    type = this.type,
    tag = this.tagName.toLowerCase();

    item.attr('name', item.attr('name') +newNum).attr('id', item.attr('id') +newNum);
    $('#cus_title').text("Customer "+newNum);

    if (type =='text'||tag=='textarea')
    this.value='';

    else if (tag=='select')
    this.selectedIndex=0;

});
});

我正在克隆的部分有文本输入、文本区域和选择输入。我也会发布 HTML，但它超过了这些帖子的 30,000 个字符的限制。如果你想要一个 JSFiddle，我可以将一个放在一起，但考虑到我对 JQuery 和 Javascript 还很陌生，我想这可能只是我的语法。

这是 JSfiddle:https://jsfiddle.net/Optiq/ct2ju1cb/

Answer 1

您的脚本存在一些问题:

TL;DR

您正在创建的新元素正在被清空，您只是将它们添加到页面顶部(参见上面的#1)，并且您以某种方式更改了错误的客户标题元素(#3)，因此它只是看起来新元素没有被清空。解决这些问题是一个很好的起点，但这样做可能会发现其他问题(#2、#4)。

详细信息(不是所有错误的完整列表)

• 您将新项目放在前面而不是追加它们，因此它们会添加到页面顶部而不是底部
• 您没有正确推导 name和id新元素的属性。 item.attr('name') +newNum解析为 NaN ，您可以通过检查浏览器的开发人员控制台中的新元素来查看。然后你就有了很多带有 id="NaN" 的元素。这绝对不是你想要的
• 您正在克隆 #cusTitle但不改变其 id ，表示返回值$("#cusTitle")将是未定义的。在我的浏览器中，结果返回值是第二个#cusTitle ，这不是我所期望的，也不是你想要的
• 您正在提供新的name一些原本没有的项目的属性(例如我检查的所有 <label> 元素)