Dynamically add/remove form input elements

Question

I'm trying to dynamically add/remove form elements using the following code:

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

$(function () {

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

//add input
$('a#add_btn').click(function () {
    $('<p><input type="text" name="items[]" id="' + i + '" value="' + i + '" />' +
        '<a class="dynamic-link" href="#step2">Remove</a></p>').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;
    });
  });

});

The input field is added but can't be removed. What am I doing wrong? http://jsfiddle.net/VTqhJ/

Answer 1

The problem is that the "Remove" links do not exist at the time you are attaching the event handlers to them. You have two options to fix this. You could attach the event handler to each "Remove" link just after it is added to the DOM, or you could us .on with the "selector" parameter. I see from your jsfiddle that you tried this, but you didn't get it right.

It should be:

$("#form-step2").on('click', '.dynamic-link', function () {
    $(this).parent().fadeOut(300, function () {
        $(this).empty();
        return false;
    });
});

You need to call .on() on an element that is an ancestor of all the "Remove" links (and exists at the time .on() is called). Then you set the "selector" parameter to identify the "Remove" links.

It is always safe to call the .on() function on $(document.body) , but it is better to use a closer ancestor. I chose the form element.

Demo on jsfiddle

Answer 2

Link for jsFiddle : http://jsfiddle.net/VTqhJ/5/

$(function () {

        //set a counter
        var i = $('.dynamic-input#form-step2').length + 1;
        alert(i);
        //add input
        $('a#add').click(function () {
            $('<p><input type="text" class="dynamic-input" name="items[]" id="' + i + '" value="' + i + '" />' +
                '<a href="#step2">Remove</a></p>').fadeIn("slow").appendTo('#extender');
            i++;

            $("a:contains('Remove')").click(function () {
              $(this).parent().css("display","none");
            });

            return false;
        });


        $("a:contains('Remove')").click(function () {
            alert('hi');
        });

        //fadeout selected item and remove
        $("#form-step2.dynamic-input").on('click', 'a', function () {
            $(this).parent().fadeOut(300, function () {
                $(this).empty();
                return false;
            });
        });

    });

Answer 3

You can use this also. It works like a charm !

But you can add limited text boxes only. But I found validating these fields difficult so I used list box method of inputting values.