How to dynamically-add / remove textbox jquery.

Question

Hello Please I am a beginner and I'm looking how to dynamically-add / remove textbox jquery. Thank you.

Upendra Pratap Shahi · Answer

hi  go through below code and attachment. $(document).ready(function () { $('#add').click(function () { var table = $(this).closest('table'); console.log(table.find('input:text').length); if (table.find('input:text').length var x = $(this).closest('tr').nextAll('tr'); $.each(x function (i val) { val.remove(); }); table.append(' First Name Last Name '); $.each(x function (i val) { table.append(val); }); } }); $('#del').click(function () { var table = $(this).closest('table'); if (table.find('input:text').length > 1) { table.find('input:text').last().closest('tr').remove(); } });}); Name Versions SELECT Test Scripts datas

Rajeesh Menoth · Answer

Hi Ref this demo : 1) http://jsfiddle.net/x7uQx/17/ 2) http://jsfiddle.net/x7uQx/11/

Rohan Gupta · Answer

html > head > title > jQuery add / remove textbox example / title > script type = text/javascript src = jquery-1.3.2.min.js > / script > style type = text/css > div{ padding:8px; } / style > / head > body > h1 > jQuery add / remove textbox example / h1 > script type = text/javascript > $(document).ready(function(){ var counter = 2; $(#addButton).click(function () { if(counter>10){ alert(Only 10 textboxes allow); return false; } var newTextBoxDiv = $(document.createElement('div')) .attr(id 'TextBoxDiv' + counter); newTextBoxDiv.after().html(' label > Textbox #'+ counter + ' : / label > ' + ' input type = text name = textbox' + counter + ' id = textbox' + counter + ' value =  > '); newTextBoxDiv.appendTo(#TextBoxesGroup); counter++; }); $(#removeButton).click(function () { if(counter==1){ alert(No more textbox to remove); return false; } counter--; $(#TextBoxDiv + counter).remove(); }); $(#getButtonValue).click(function () { var msg = ''; for(i=1; i ) { msg + = 
 Textbox # + i +  :  + $ ( '#textbox' + i ) .val ( ) ; } alert ( msg ) ; } ) ; } ) ; / script > / head > body > div id = 'TextBoxesGroup' > div id = TextBoxDiv1 > label > Textbox #1 : / label > input type = 'textbox' id = 'textbox1' > / div > / div > input type = 'button' value = 'Add Button' id = 'addButton' > input type = 'button' value = 'Remove Button' id = 'removeButton' > input type = 'button' value = 'Get TextBox Value' id = 'getButtonValue' > / body > / html >

Munesh Sharma · Answer

http://www.jqueryfaqs.com/Articles/Dynamically-add-and-remove-TextBoxes-and-get-value-of-dynamic-TextBox-using-jQuery.aspx