The code that i used to create the functionality is below
<!DOCTYPE html>
<html>
<head>
<title>Dynamically Add and Delete Textbox using jQuery</title>
<meta charset='utf-8'>
<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>
<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;">
<form>
<div id="button_pro">
<div class='space' id='input_1'>
<table>
<tr>
<th> Name </th>
<th> Description </th>
<th> section </th>
</tr>
<tr>
<td><input id="input_1" type="text" name="val[]" class='left txt'/></td>
<td><input id="input_1" type="text" name="val[]" class='left txt'/></td>
<td><input id="input_1" type="text" name="val[]" class='left txt'/></td>
<td><img class="add right" src="images/add.png" /></td>
</tr>
</table>
</div>
</div>
<input type='submit' value='Submit' class='but'/>
</form>
</div>
<script>
$('document').ready(function(){
var id=2,txt_box;
$('#button_pro').on('click','.add',function(){
$(this).remove();
txt_box='<div class="space" id="input_'+id+'" ><table><tr><th> Name </th><th> Description </th><th> Section </th></tr> <tr><td><input id="input_'+id+'" type="text" name="val[]" class="left txt"/></td><td><input id="input_'+id+'" type="text" name="val[]" class="left txt"/></td><td><input id="input_'+id+'" type="text" name="val[]" class="left txt"/></td><td><img class="remove" src="images/remove.png" /></td><td><img class="add right" src="images/add.png" /></td></tr></table></div>';
$("#button_pro").append(txt_box);
id++;
});
$('#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"/>');
}
});
});
});
</script>
</body>
</html>
The problem here is the plus image functionality works fine where as the minus image that is to remove the text boxes is not working.
When i remove the tag from the text box variable and add it before the tags in the text box variable it works properly.
I am not sure why the tag change affects the functionality of the remove function
I have modified you code and made it simpler. You can use the closest function to make things easy.
Here is the fiddle : http://jsfiddle.net/swaprks/4b5wdev2/
CSS:
@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;}
JS:
$('document').ready(function(){
var id=2,txt_box;
$('#button_pro').on('click','.add',function(){
$(this).remove();
txt_box='<div class="space" id="input_'+id+'" ><table><tr><th> Name </th><th> Description </th><th> Section </th></tr> <tr><td><input id="name_'+id+'" type="text" name="val[]" class="left txt"/></td><td><input id="desc_'+id+'" type="text" name="val[]" class="left txt"/></td><td><input id="section_'+id+'" type="text" name="val[]" class="left txt"/></td><td><img class="remove" src="images/remove.png" /></td><td class="addTD"><img class="add right" src="images/add.png" /></td></tr></table></div>';
$("#button_pro").append(txt_box);
id++;
});
$('#button_pro').on('click','.remove',function(){
var parent = $(this).closest(".space");
var parentPrev = $(parent).prev().find(".addTD");
$(parent).slideUp('medium',function(){
$(parent).remove();
if($('.add').length < 1){
$(parentPrev).append('<img src="images/add.png" class="add right"/>');
}
});
});
});
HTML:
<p>Dynamically Add and Delete Textbox using jQuery</p>
<div id="advice" style="width: 400px; height: auto;">
<form>
<div id="button_pro">
<div class='space' id='input_1'>
<table>
<tr>
<th> Name </th>
<th> Description </th>
<th> section </th>
</tr>
<tr>
<td><input id="name_1" type="text" name="val[]" class='left txt'/></td>
<td><input id="desc_1" type="text" name="val[]" class='left txt'/></td>
<td><input id="section_1" type="text" name="val[]" class='left txt'/></td>
<td class="addTD"><img class="add right" src="images/add.png" /></td>
</tr>
</table>
</div>
</div>
<input type='submit' value='Submit' class='but'/>
</form>
</div>
Please have a look demo to add and remove dynamic input field:
$(function() { var scntDiv = $('#p_scents'); var i = $('#p_scents p').size() + 1; $('#addScnt').on('click', function() { $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv); i++; return false; }); $('#remScnt').on('click', function() { if( i > 2 ) { $(this).parents('p').remove(); i--; } return false; }); });
* { font-family:Arial; } h2 { padding:0 0 5px 5px; } h2 a { color: #224f99; } a { color:#999; text-decoration: none; } a:hover { color:#802727; } p { padding:0 0 5px 0; } input { padding:5px; border:1px solid #999; border-radius:4px; -moz-border-radius:4px; -web-kit-border-radius:4px; -khtml-border-radius:4px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <h2><a href="#" id="addScnt">Add Another Input Box</a></h2> <div id="p_scents"> <p> <label for="p_scnts"> <input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /> </label> </p> </div>
Thanks!
See the below demo
Just add the following line in the .remove
click function
$('#button_pro').on('click','.remove',function(){
$(this).parent().closest(".space").remove();
});
You can use data-*
attributes for your labels and make sure you don't duplicate ids. The best way to have is to have ids as in data-* attrs so that they can have dupes.
$('document').ready(function(){ $('#button_pro').on('click','.add',function(){ var id=$('#button_pro > div.space').data('id')*1+1; $(this).remove(); var txt_box='<div class="space" data-id="'+id+'" id="input_'+id+'" ><table><tr><th> Name </th><th> Description </th><th> Section </th></tr> <tr><td><input id="input_'+id+'" type="text" name="val[]" class="left txt"/></td><td><input id="input_'+id+'" type="text" name="val[]" class="left txt"/></td><td><input id="input_'+id+'" type="text" name="val[]" class="left txt"/></td><td><img class="remove" src="images/remove.png" /></td><td><img class="add right" src="images/add.png" /></td></tr></table></div>'; $("#button_pro").append(txt_box); }); $('#button_pro').on('click','.remove',function(){ var id = $(this).closest('div.space').prev(); $(this).closest('#button_pro > div.space').slideUp('medium',function(){ if($('div.space').length>1){ if(this == $('#button_pro > div.space:last')[0]) id.find('td').last().append('<img src="images/add.png" class="add right"/>'); $(this).remove(); } }); }); });
@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;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>Dynamically Add and Delete Textbox using jQuery</p> <div id="advice" style="width: 400px; height: auto;"> <form> <div id="button_pro"> <div class='space' data-id='1'> <table> <tr> <th> Name </th> <th> Description </th> <th> section </th> </tr> <tr> <td><input id="input_1" type="text" name="val[]" class='left txt'/></td> <td><input id="input_1" type="text" name="val[]" class='left txt'/></td> <td><input id="input_1" type="text" name="val[]" class='left txt'/></td> <td><img class="add right" src="images/add.png" /></td> </tr> </table> </div> </div> <input type='submit' value='Submit' class='but'/> </form> </div>
Create index.html and add jQuery libary, textbox and an image(addition).
Html:
<!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>
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>
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++;
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.