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

How to dynamically-add / remove textbox jquery.

Answers (4)