动态地向HTML表单添加输入

Question

如果我们点击“添加”链接，则应在表单中添加新输入。

此外，每个添加的输入附近应该有“删除”链接。如果我们点击它，则应删除此输入。

我该怎么做？

Answer 1

我很难投票决定将其作为副本关闭，即使它不是完全。但是你要找的东西似乎得到了解答here。主要区别在于它们绑定到change元素的select事件：

$("#selectBox").change(function() {

您将绑定到锚元素的click事件（您的“添加”链接）：

$("#addLink").click(function() {

“删除”链接可以类似的方式工作。当为新输入创建HTML时，您还要在将其添加到DOM之前创建“删除”链接，然后将其添加到DOM（在引用的代码中调用.html()函数）。您需要确保为添加的HTML添加唯一的id（例如，div包含一个唯一的id），以及添加的“删除”链接。

然后，在将它添加到DOM之后，您将向“删除”链接添加一个事件处理程序：

$("#deleteLink123").click(function() {

在此处理程序中，您将引用添加到DOM和remove it的容器的唯一id。我确信使用.live()函数here以及更聪明的selectors来处理这个问题的方法更为优雅。在尝试不太聪明以至于伤害持续的支持时，重新考虑这样的事情会很有趣。

在开发时，您需要记住一些其他注意事项：

1. 锚标记是默认链接，但看起来您不希望它们链接到任何内容。你可以将它们链接到“＃”，但这并不是很优雅。您可以完全从它们中删除href属性，但是您还需要将它们设置为在视觉上像链接一样。不难，但也不直观。为什么不按钮？
2. 服务器处理时实际表单的行为由您决定。您可以动态地将元素添加到DOM的内容中，但这可能对服务器端没有帮助。完全是另一个问题。