Javascript 动态添加/删除表单输入元素

我尝试使用以下代码动态添加/删除表单元素：

<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;
    });
  });

});

投入

$（函数（）{
//设置计数器
变量i=$（“#表单步骤2：输入”）。长度+1；
//添加输入
$（'a#add_btn'）。单击（函数（）{
$（“”+
“
”）.fadeIn（“慢”）.appendTo（“扩展器”）；
i++；
返回false；
});
//淡出所选项目并删除
$（“.dynamic link”）.bind（'click'，函数（）{
$（this）.parent（）.fadeOut（300，函数（）{
$（this.empty（）；
返回false；
});
});
});

输入字段已添加，但无法删除。我做错了什么？ 您也可以使用。它就像一个符咒

但您只能添加有限的文本框。但是我发现验证这些字段很困难，所以我使用列表框方法输入值。

问题是在将事件处理程序附加到这些字段时，“删除”链接不存在。您有两个选项来修复此问题。您可以在将事件处理程序添加到DOM之后将其附加到每个“Remove”链接，也可以使用“selector”参数在上添加事件处理程序。我从你的jsfiddle中看到，你尝试过这个，但没有做对

应该是：

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

您需要对一个元素调用

.on（）

，该元素是所有“删除”链接的祖先（并且在调用

.on（）

时存在）。然后设置“选择器”参数以标识“删除”链接

调用

$（document.body）

上的

.on（）

函数总是安全的，但最好使用更接近的祖先。我选择了表单元素

JSFIDLE的链接：

$（函数（）{
//设置计数器
变量i=$（'.动态输入#形式步骤2'）。长度+1；
警报（一）；
//添加输入
$（'a#add'）。单击（函数（）{
$（“”+
“
”）.fadeIn（“慢”）.appendTo（“扩展器”）；
i++；
$（“a:contains（'Remove'））。单击（函数（）{
$（this.parent（）.css（“显示”、“无”）；
});
返回false；
});
$（“a:contains（'Remove'））。单击（函数（）{
警报（“hi”）；
});
//淡出所选项目并删除
$（#form-step2.dynamic input”）。在（'click'，'a'，函数（）{
$（this）.parent（）.fadeOut（300，函数（）{
$（this.empty（）；
返回false；
});
});
});

Use.on并使用父元素绑定它，因为它在绑定时存在。运气不好：看起来“Remove”链接没有删除

元素。他们只是移除里面的东西。我认为您可以将

$（this）.empty（）

替换为

$（this）.remove（）

。感谢您的详细解释！顺便说一句，有没有比$（“#form-step2:input”）.length更有效的获取输入字段计数的方法？@Shakur-这是个好问题。我不相信有。创建jQuery包装集只是为了获得它的长度，这有点浪费。

$(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;
            });
        });

    });