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

<script src="https://code.jquery.com/jquery-1.12.3.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>

CSS

* {
  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;
}

JavaScript

$(function() {
  var scntDiv = $('#p_scents');
  var i = $('#p_scents p').size() + 1;

  $(document).on('click', '#addScnt', function() {
    $('#addScnt').parent().clone().appendTo(scntDiv);
    $('<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;
  });

  $(document).on('click', '#remScnt', function() {
    if (i > 2) {
      $(this).parents('p').prev().remove();
      $(this).parents('p').remove();
      i--;
    }
    return false;
  });
});