将输入动态添加到HTML表单

Question

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

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

我该怎么做？

Answer 1

我在努力是否投票将其作为副本关闭，即使它不是确切。但是你要找的东西似乎回答了here。主要的区别在于，在那里它们被绑定到change事件的select元素：

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

你反而会绑定到click事件定位元素的（你的“添加”链接）：

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

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

然后，它添加到DOM后，你的事件处理程序添加到“删除”链接：

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

在此处理程序你会参考什么是容器的独特id添加到DOM和remove it。我敢肯定有一个更好的方法来处理这个问题，通过使用.live()函数here和更巧妙的selectors。重新考虑这样的事情会很有趣，同时试图不要太聪明以至于伤害持续的支持。

有你要记住，你开发了一些额外的考虑是：

1. 锚标签是默认链接，但看起来你不想让他们链接到任何东西。您可以将它们链接到“＃”，但那不太优雅。您可以完全从它们中删除href属性，但是您还需要对它们进行样式设置，使其在视觉上类似于链接。不难，但也不直观。为什么不按钮？
2. 实际表单由服务器处理时的行为方式取决于您。您可以动态地将元素添加到您的心脏内容的DOM中，但这可能无助于您在服务器端。不过，这完全是另一个问题。