如何创建附加字段并将它们从表单中删除？答案

【问题标题】：How to create additional fields and remove them from a form?如何创建附加字段并将它们从表单中删除？
【发布时间】：2013-08-08 03:00:02
【问题描述】：

如果用户想要添加其他电子邮件帐户，我正在尝试允许他们添加其他电子邮件字段，如果他们不想添加该字段，请点击删除。但是，我无法让删除按钮起作用，而且我也试图通过在每个类中包含一个变量 emailCount 来以某种方式区分每个类，但由于某种原因这也不起作用......

这里是 jquery 脚本：（它在一个文档准备函数中）

  var i = 0;
 $(function(){       
        i =+ 1;
        var emailCount = "Email" + i.toString();
        console.log(i);
        console.log(emailCount);
        $('.addEmail').click(function() {


            $('#addInfo').append('<div class="' + emailCount '"></div><form class="newEmail", method="post", action="newEmailPost"> <label>' + emailCount + '</label>' + '<input name="' + emailCount + '", type="email", value=""/><br><input type="submit", class="addNewEmail", value="Save Email"></input><button class="removeEmailField">Remove</button></form><br>');
        });

         $('.removeEmailField').click(function() {
            $(emailCount).remove();

        });
    });

这是玉文件：（它可以正常工作，但可能有助于视觉目的）

extends layout
block content   
    div.centerContent
        div
            form.validateForm(method="POST", action="/editUserProfile")
                    legend Edit Profile
                    input(type="text", name="firstName", maxlength="20", placeholder=ufirstName, value=ufirstName)
                    br
                    input(type="text", name="lastName", maxlength="20", placeholder=ulastName, value=ulastName)
                    br
                    input(type="email", name="email", maxlength="20", placeholder=uemail, value=uemail)
                    br
                    - if(uemailList.length > 0)
                        for userC in uemailListCount
                            for userE in uemailList
                                input(type="email", name=userC, maxlength="20", placeholder=userE, value=userE)
                                br
                    input(type="number", name="phone", maxlength="20", placeholder=uphone, value=uphone)
                    br
                    input(type="date", name="birthday", value=ubirthday)
                    br
                    input.btn.btn-primary(type="submit", name="Update", value="Save")
                    a(href="/userProfile")
                        button.btn(type="button") Cancel
                    hr
        div#addInfo
            label Add another email address:  
                button.addEmail Add Email
            br
            label Add another phone number:  
                button.addPhone Add Phone Number

【问题讨论】：

标签： javascript jquery forms pug

【解决方案1】：

你可以试试这个：

$("."+emailCount).remove();
i--;

如果您想多次添加或删除，请确保将 emailCount 设置为正确的值，添加时不要再次设置，删除时也不要更改 i。

【讨论】：

我实际上收到了 .append 代码行未捕获语法错误的错误：意外标识符

【解决方案2】：

我认为您可能需要在删除函数中将 emailcount 转换为类格式。比如：

var classifiedEmailCount = "." + emailCount;
$(stringifiedEmailCount).remove();
i--;

【讨论】：

是的，请参阅上面的评论，我的代码出现了一些错误，不知道为什么？

【解决方案3】：

好的，我只是把它改了一下：

$('.addEmail').click(function() {
            $('#addInfo').replaceWith('<div class="newEmailAdd"></div><form class="newEmail", method="post", action="/newEmailPost"> <label> Add Another Email </label>' + '<input name="emailNew", type="email", value=""/><br><input type="submit", class="addNewEmail", value="Save Email"></input><button class="removeEmailField">Remove</button></form><br>');
        });



 $('.removeEmailField').click(function() {
            alert('You clicked remove');
            $('.newEmailAdd').remove();

  });

我不再需要多个字段来工作了。

【讨论】：