jQuery Add/Remove Input Fields

A script that uses event delegation and the .live() method for adding and deleting extra input form fields.

by lemon kazi

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container-fluid">
  <div class="row">
    <div class="parent-col col-md-12">
      <input type="text" />
      <BR />
      <a class='sibling'>Add Sibling</a>
      or
      <a class='child'>Add Child</a>
    </div>
  </div>
</div>

CSS

div{
  text-align: center;
}

JavaScript

$('.child').click(function(){
	var r = $(this).closest('div.row').clone(true, true);
  r.find('.parent-col').not(':eq(0)').remove();
  var c = $(this).closest('.parent-col');
  var n = c.append( r );
});

$('.sibling').click(function(){
	
  var thisC = $(this).closest('.parent-col');
  var n = thisC.clone(true, true);
  thisC.after(n);
	var c = $(this).closest('div.row');
	var len = $('div.parent-col', c).length;
  var newClass = Math.ceil(12/len);
  c.find('.parent-col').attr('class', 'parent-col col-md-'+newClass);
  
});