Jquery Kullanarak İnput Alanları Ekleme Ve Silme

• 19-01-2017
• Admin
• 6954 Okunma
• Paylaş
• Paylaş
• Paylaş

Style

<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>

Jquery dosyamız

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Formumuz

  <form>
  <div id="button_pro">
	<div class='space' id='input_1'>
		<input id="input_1" type="text" name="val[]" class='left txt'/>
		<img class="add right" src="images/add.png" />
	</div>
   </div>	
	<input type='submit' value='Gönder' class='but'/>
 </form>	

Script

<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+'" ><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++;
	});

	$('#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>