將輸入動態添加到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中，但這可能無助於您在服務器端。不過，這完全是另一個問題。