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>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Dynamically Add and Delete Textbox using jQuery</title>
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
		<p>Dynamically Add and Delete Textbox using jQuery</p>
		<div id="advice" style="width: 400px; height: auto;margin:0px auto;">
			<form method="post">
				<div id="button_pro">
					<div class="space" id="input_1">
						<input type="text" name="val[]" class="left txt" />
						<img class="add right" src="images/add.png" />
					</div>
				</div>
				<input type="submit" value="Kiss Me!" class="but" />
			</form>
		</div>
		<script src="js/jquery-1.9.1.min.js"></script>
		<script src="js/app.js"></script>
	</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() {
        var $this = $(this);
        var parentId = $this.parent().attr("id");
        if ($('#'+parentId).find('.remove').length == 0) {
            $('#'+parentId).append('<img src="images/remove.png" class="remove"/>')
        }
        $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 text boxes. Also adds remove button near first textbox.

Step 4:

Now add following script to do delete 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 ($("#button_pro").find('input').length === 1) {
                $("#button_pro").find('input').parent().find('.remove').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] muni2explore[at]gmail.com

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.

Get Instant Script Download Access!