用于添加/删除字段的Javascript函数

我对JavaScript不是很有经验，但这段代码与我所寻找的代码类似，特别是其中包含“删除字段”链接的代码。以下是Javscript函数：

//Add more fields dynamically.
function addField(field,area,limit) {
    if(!document.getElementById) return; //Prevent older browsers from getting any further.
    var field_area = document.getElementById(area);
    var all_inputs = field_area.getElementsByTagName("input"); //Get all the input fields in the given area.
    //Find the count of the last element of the list. It will be in the format '<field><number>'. If the 
    //      field given in the argument is 'friend_' the last id will be 'friend_4'.
    var last_item = all_inputs.length - 1;
    var last = all_inputs[last_item].id;
    var count = Number(last.split("_")[1]) + 1;

    //If the maximum number of elements have been reached, exit the function.
    //      If the given limit is lower than 0, infinite number of fields can be created.
    if(count > limit && limit > 0) return;

    if(document.createElement) { //W3C Dom method.
        var li = document.createElement("li");
        var input = document.createElement("input");
        input.id = field+count;
        input.name = field+count;
        input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
        li.appendChild(input);
        field_area.appendChild(li);
    } else { //Older Method
        field_area.innerHTML += "<li><input name='"+(field+count)+"' id='"+(field+count)+"' type='text' /></li>";
    }
}

//动态添加更多字段。
函数addField（字段、区域、限制）{
如果（！document.getElementById）返回；//防止旧浏览器进一步访问。
变量字段\区域=document.getElementById（区域）；
var all_inputs=field_area.getElementsByTagName（“输入”）；//获取给定区域中的所有输入字段。
//查找列表中最后一个元素的计数。其格式为“”。如果
//参数中给出的字段为“friend_”，最后一个id为“friend_4”。
var last_item=所有_输入。长度-1；
var last=所有输入[最后一项].id；
var计数=数量（最后一次分割（“”）[1]）+1；
//如果已达到最大元素数，则退出该函数。
//如果给定的限制小于0，则可以创建无限数量的字段。
如果（计数>限制和限制>0）返回；
if（document.createElement）{//W3CDOM方法。
var li=document.createElement（“li”）；
var输入=document.createElement（“输入”）；
input.id=字段+计数；
input.name=字段+计数；
input.type=“text”；//字段类型-可以是任何有效的输入类型，如文本、文件、复选框等。
li.追加子项（输入）；
场区面积（li）；
}else{//Older方法
field_area.innerHTML+=“
”；
}
}

以下是表单的HTML：

<form name="frm" method="POST">
<strong>Neutral List</strong><br />
<ol id="neutrals_area">
<li><input type="text" name="neutral_1" id="neutral_1" /> <a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li>
<li><input type="text" name="neutral_2" id="neutral_2" /> <a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li>
<li><input type="text" name="neutral_3" id="neutral_3" /> <a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li>
<li><input type="text" name="neutral_4" id="neutral_4" /> <a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li>
<li><input type="text" name="neutral_5" id="neutral_5" /> <a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li>
</ol>
<input type="button" value="Add Neutral Field" onclick="addField('neutrals_area','neutral_',0);" />
</form>

中立列表

删除字段
删除字段
删除字段
删除字段
删除字段

但是，我希望使用“删除链接”代码生成附加字段，而不仅仅是脚本中包含代码的字段。我知道自定义函数必须进行调整以包含该行为，但我在尝试使该函数正常工作时遇到了各种各样的困难。在addField函数底部“}else{”后面的旧方法中，通过编辑要读取的代码来执行此操作似乎很简单：

} else { //Older Method
    field_area.innerHTML += "<li><input name='"+(field+count)+"' id='"+(field+count)+"' type='text' /><a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li>";
}

}else{//Older方法
field_area.innerHTML+=“
删除字段”
”；
}

---

然而，如何将其包括在W3C DOM方法中，我感到很困惑。

我强烈建议您看看jQuery（类似于：prototype、motools等）

它们具有功能齐全的DOM操作功能，这使得您的请求与编写一行js一样复杂。

如果（！document.getElementById）和

如果（document.createElement）

条件，请删除这些

。每个浏览器都支持它们，而那些不值得支持的浏览器（让它们抛出错误）

要将remove方法添加到DOM创建的元素中，只需使用
onclick
属性。您也可以使用，但这需要IE的一些变通方法。请参阅第节和

所以代码应该是

...
li.appendChild(document.createTextNode(" ");
var a = document.createElement("a");
a.appendChild(document.createTextNode("Remove Field"));
a.style = "cursor:pointer;color:blue;";
a.onclick = function() {
    // this.parentNode.parentNode.removeChild(this.parentNode);
    // nay. we have better references to those objects:
    field_area.removeChild(li);
};
li.appendChild(a);

我不同意卡帕的观点，强烈鼓励你继续做你正在做的事情。JQUery是一个很好的工具，但它常常是一个拐杖，在使用javascript时，了解自己在做什么以及为什么要这样做非常重要。特别是如果你正在学习如何在这个行业找到一份工作，你将需要直接的JavaScript

好消息是，你要做的其实很简单

    var li = document.createElement("li");
    var input = document.createElement("input");
    input.id = field+count;
    input.name = field+count;
    input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
    li.appendChild(input);
    field_area.appendChild(li);
    //create the removal link
    removalLink = document.createElement('a');
    removalLink.onclick = function(){
        this.parentNode.parentNode.removeChild(this.parentNode)
    }
    removalText = document.createTextNode('Remove Field');
    removalLink.appendChild(removalText);
    li.appendChild(removalLink);

以下是JSFIDLE上的代码：
不需要jQuery来创建这样一个简单的功能。我使用了一些jQuery进行表单验证，主要是“远程”函数，用PHP检查现有的数据库条目。我不知道它能做这样的事情。我确实想了解它的JavaScript，但任何解决方案都可以。我认为我的表单可能会变得更加复杂，因为我希望将三个相关字段添加到一起，然后一起删除（例如，汽车制造、发动机类型和制造年份的三个相关字段）。Bergi阅读了我对Chris Sobolewski解决方案的评论。然后想一想，当你在软件中迈出第一步时，你无法想象这种情况在未来会变成什么样子；因此，我总是试图得到最好的解决方案，这将使我能够轻松地进行任何进一步的更改。kappa-关于在jQuery中执行此操作，您能为我指出正确的方向吗。我想知道如何做到这两个方面，你的观点是很好地采取关于易于更新。ThanksI肯定是在尝试类似的东西，但是被“a”语法所困扰。我也要试试这个。非常感谢。我一定会跟进，在我尝试之后。谢谢。我要试试这个。这看起来很简单。我希望一旦我理解了我所做的核心，事情会变得更复杂。具体来说，一组三个字段可以作为一个组进行添加或删除（例如，汽车品牌、发动机类型和制造年份），用于学习目的我同意手工制作的简单js解决方案，但对于生产，我不明白为什么不依赖干净、轻量和经过良好测试的库。好的，我使用了您的代码，并将其与团队中的三个相关字段一起使用。再次感谢。