Dynamically add/remove form input elements
<p>I'm trying to dynamically add/remove form elements using the following code:</p>

<pre><code>&lt;form method="post" action="" id="form-step2" class="form-vertical"&gt;
   &lt;fieldset&gt;
      &lt;legend&gt;Inputs&lt;/legend&gt;
      &lt;div id="extender"&gt;&lt;/div&gt;
      &lt;p&gt;&lt;a id="add_btn" href="#"&gt;Add&lt;/a&gt;&lt;/p&gt;
    &lt;/fieldset&gt;
&lt;/form&gt;

$(function () {

//set a counter
var i = $('#form-step2 :input').length + 1;

//add input
$('a#add_btn').click(function () {
    $('&lt;p&gt;&lt;input type="text" name="items[]" id="' + i + '" value="' + i + '" /&gt;' +
        '&lt;a class="dynamic-link" href="#step2"&gt;Remove&lt;/a&gt;&lt;/p&gt;').fadeIn("slow").appendTo('#extender');
    i++;
    return false;
});


//fadeout selected item and remove
$(".dynamic-link").bind('click', function () {
    $(this).parent().fadeOut(300, function () {
        $(this).empty();
        return false;
    });
  });

});
</code></pre>

<p>The input field is added but can't be removed. What am I doing wrong?
<a href="http://jsfiddle.net/VTqhJ/" rel="nofollow">http://jsfiddle.net/VTqhJ/</a></p>
