如何動態添加和刪除輸入文本框？

-3

<p>What's your question?</p> 
<input type='text' name='question'/>

而且還有一個按鈕：

<input type='button' value='Add' />

我想要實現的是，當我按一下按鈕，該組的元素將被創建在動態的HTML頁面。另外的元素旁邊有一個刪除按鈕：

<input type='button' value='Remove' />

當我點擊它，該元素將被刪除。

該過程可以動態執行多次，所有這些元素都包含在一個表單中。用戶輸入答案後，所有信息都會發布到另一頁。

我覺得這個功能可以通過js實現，但我不知道該怎麼做。請提供一些代碼。謝謝！

來源

2011-10-25 user878729

你甚至嘗試過搜索嗎？ http://stackoverflow.com/search?q=add+remove+input+[javascript] – mplungjan

你使用任何庫或框架？（jquery ...） – JMax

我做了，但沒有發現。還是謝謝！ – user878729

要做到這一點，最簡單的方法是使用jQuery和做添加/按鈕刪除操作單擊

HTML：

<div> 
    <button id='addButton'>Add</button> 
    <button id='removeButton'>Remove</button> 
</div> 
<div id='target'></div>

的JavaScript：

$(document).ready(function() { 
    $('#addButton').click(function() { 
     var elem = $('<div></div>'); 
     elem.append('<p>What\'s your name</p>'); 
     elem.append('<input type="text">'); 
     $('#target').append(elem); 
    }); 

    $('#removeButton').click(function() { 
     $('#target div:last').remove(); 
    }) 
});

小提琴：http://jsfiddle.net/XZqPa/

來源

2011-10-25 19:42:58 JaredPar

謝謝！這非常有幫助！ – user878729

這個問題已被問了很多次。搜索「Javascript show hide元素」。

就個人而言，我會使用jQuery庫，觸殺輸入元素或有些DIV周圍，你要動態地顯示和隱藏標記，用一個ID標記和使用如下代碼：

$('#someuniqueid').hide(); 

$('#someuniqueid').show();

隱藏並顯示你的標記。該解決方案假設輸入元素已經在頁面中，JaredPar的解決方案動態地創建您的輸入元素。兩者都一樣好 - 但jQuery使這非常簡單。

如果你想要一個香草js解決方案 - 通過搜索查看其他答案 - 有幾種可供選擇。

來源

2011-10-25 19:42:02 iandotkelly

如何動態添加和刪除輸入文本框？

回答

相關問題