动态添加/删除文本字段

Question

我正在尝试添加自动插入/删除文本字段的功能。插入新的时它可以工作，但不能删除。即使on ('click')也不会被触发。

以下是摘录：

＆＃13;

＆＃13;

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

  $('#add').on('click', function() {
    $('<p><input type="text" id="val" size="50" name="val-' + i + '" value="" placeholder="Input Value" /> <a href="#" id="del">Remove</a></p>').appendTo(scntDiv);
    i++;
    return false;
  });
  
   $('#del').on('click', function() {
    if (i > 2) {
      $(this).parents('p').remove();
      i--;
    }
    return false;
  });

 
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="values">
  <p>
    <input type="text" id="val" size="25" name="val" value="" placeholder="Input Value" />
  </p>
</div>

<h2><a href="#" id="add">Add more</a></h2>

＆＃13;

＆＃13;

＆＃13;

非常感谢任何建议