Please support us by disabling ad blocker for smarttutorials.net ...

Dynamically Add and Remove Textbox Using jQuery

Posted by & filed under CSS, HTML5, JQUERY.

Dynamically add and delete textboxes using jQuery may you require in some projects or you like to do this to learn some interesting jQuery stuffs. Now we are going to make this stuff by going through step by step, so that you can make it yourself as well learn the logics and some basic of jQuery selectors and events.

Dynamically Add and Remove Textboxes using jQuery

Dynamically Add and Remove Textboxes using jQuery

 

Demo of Dynamically Add and Remove Textboxes using jQuery

Demo

 

step 1:
Create index.html and add jQuery libary, textbox and an image(addition).

<!DOCTYPE html>
<html>
<head>
<title>Dynamic Textbox addition and Deletion using jQuery</title>
<meta charset='utf-8'>
<script src='js/jquery-1.9.1.min.js'></script>
</head>
<body>
<p>Dynamically Add and Delete Textbox using jQuery</p>
<div id="advice" style="width: 400px; height: auto;margin:0px auto;">
  <form>
  <div id="button_pro">
    <div class='space' id='input_1'>
        <input id="input_1" type="text" name="val[]" class='left txt'/>
        <img src="images/add.png" />
    </div>
   </div>    
    <input type='submit' value='Kiss Me!' class='but'/>
 </form>    
</div>
</body>
</html>

 

Dynamically Add and Remove Textboxes using jQuery

Download

Step 2:

Now add below css styles in the head section to add a beauty.

<style>
@font-face{font-family: Lobster;src: url('Lobster.otf');}
body{width:750px;margin:0px auto;}
.space{margin-bottom: 4px;}
.txt{width:250px;border:1px solid #00BB64; height:30px;border-radius:3px;font-family: Lobster;font-size:20px;color:#00BB64;}
p{font-family: Lobster;font-size:35px; text-align:center;}
.but{width:250px;background:#00BB64;border:1px solid #00BB64;height:40px;border-radius:3px;color:white;margin-top:10px;}
</style>

Step 3:
Now we come into party of jQuery. First task is when we clicked on plus image it will dynamically add textboxes into the form.

        var id=2,txt_box;
	$('#button_pro').on('click','.add',function(){
		  $(this).remove();
		  txt_box='<div class="space" id="input_'+id+'" ><input type="text" name="val[]" class="left txt"/><img src="images/remove.png" class="remove"/><img class="add right" src="images/add.png" /></div>';
		  $("#button_pro").append(txt_box);
		  id++;
	});

when we clicked on the add image it will append textbox, plus image (addition) and minus image(Delete), as well we remove plus image next to the first textboxes.

Step 4:

Now add following script to do operation when we clicked on the minus image(Delete).

$('#button_pro').on('click','.remove',function(){
	        var parent=$(this).parent().prev().attr("id");
			var parent_im=$(this).parent().attr("id");
			$("#"+parent_im).slideUp('medium',function(){
				$("#"+parent_im).remove();
				if($('.add').length<1){
					$("#"+parent).append('<img src="images/add.png" class="add right"/> ');
				}
	        });
   });

This will get the current parent id of the textbox and hide textbox.

var parent_im=$(this).parent().attr("id");
$("#"+parent_im).slideUp('medium');

Following script gets the current textbox previous container id.

var parent=$(this).parent().prev().attr("id");

Following script checks if there is no add image it’ll add image to the form.

if($('.add').length<1){
  $("#"+parent).append('<img src="images/add.png" class="add right"/> ');
}

Please refer one of my interesting tutorial using jQuery– Dynamically Add or Remove Table Row Using jQuery.

Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts

If you want any of my script need to be customized according to your business requirement,

Please feel free to contact me [at] muni[at]smarttutorials.net

Note: But it will be charged based on your customization requirement

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. Click to Subscribe (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

  • Aishwarya Mago

    heyy i used the exact same code yet the add or remove buttons arent working!!!

  • Chandu Ratkal

    It’s not a working code! both add and remove functionalities are not working.

  • It’s working fine demo code. I have checked. Can i know which version jQuery you are using?

Get Instant Script Download Access!