动态地将输入添加到 HTML 表单 [关闭]

Posted 2023-03-05

【中文标题】动态地将输入添加到 HTML 表单 [关闭]

【英文标题】：Dynamically add an input to an HTML form [closed]

【发布时间】：2011-09-12 21:15:56

【问题描述】：

如果我们点击“添加”链接，一个新的输入应该被添加到表单中。

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

我该怎么做？

【问题讨论】：

到目前为止你有什么尝试？

【参考方案1】：

我正在努力是否投票决定是否将其作为重复项关闭，即使它不是准确。但是您要查找的内容似乎已得到答复here。主要区别在于它们绑定到change 事件的select 元素：

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

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

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

“删除”链接将以类似的方式工作。由于为新输入创建了 html，您还需要在将其添加到 DOM 之前创建旁边的“删除”链接（在引用的代码中调用 .html() 函数）。您需要确保为添加的 HTML 提供唯一的 id（例如，包裹在具有唯一 id 的 div 中）以及添加的“删除”链接。

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

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

在此处理程序中，您将引用添加到 DOM 的容器的唯一 id 和 remove it。我确信通过使用.live() 函数here 和一些更聪明的selectors 可以更优雅地处理这个问题。重新考虑这样的事情，同时尽量不要太聪明以免损害持续的支持会很有趣。

在开发此功能时，您需要牢记一些其他注意事项：

默认情况下，锚标记是链接，但您似乎不希望它们链接到任何东西。您可以将它们链接到“#”，但这并不是很优雅。您可以从它们中完全删除 href 属性，但是您还需要设置它们的样式，使其在视觉上表现得像链接。不难，但也不直观。为什么不是按钮？ 由服务器处理时实际表单的行为取决于您。您可以动态地将元素添加到 DOM 中，以满足您的需求，但这在服务器端可能对您没有帮助。不过，这完全是另一个问题。

【讨论】：

您赢得了当天的答题质量比奖。

@Bill the Lizard：这与梦寐以求的 Reversal 徽章相去甚远，但我会接受它 :)

仅剩 12 个！ （哎呀，它现在已经退役了）