删除动态创建的表单字段的按钮

时间:2013-08-30 21:30:21

标签: jquery

我正在开发一个网站来添加,验证和删除表单字段集(以单一形式)。

我尝试让代码适用于删除按钮(对于每个添加的表单字段集),但没有成功(尽管在此站点和谷歌上查看了一些示例)。

我知道删除按钮的相关代码出错了吗?

请参阅下面的代码(特别是以form.find ...

开头的代码
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" > </script>   
    <script type="text/javascript" src="js/jquery.validate.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            var wrapper = $("#wrapper");
            var addForm = $("#add-form");
            var index = 0;

            $("#myForm").validate({
                errorPlacement: function(error, element) {
                    error.insertAfter(element);
                    //$(element).next().after(error);
                    //error.appendTo( element.parent().next() );
                },
                rules: {} //rules
            }); //validate()

            var getForm = function(index, action) { //returns set of form fields as a string
            return $('\
                <table>\
                <tr>\
                <td> Name </td> <td> Email </td> <td> Phone </td>\
                </tr>\
                <tr>\
                <td> <input id="name' + index + '" name="name' + index + '" /></td>\
                <td><input id="email' + index + '" name="email' + index + '" /></td>\
                <td><input id="phone' + index + '" name="phone' + index + '" /></td>\
                </tr>\
                <a href="#" class="remove">remove fieldset</a>\
                </table>\
                ');
            }//getForm()

            addForm.on("click", function() {
                var form = getForm(++index)
                form.find(".remove").on("click", function() {
                    $(this).parent().remove();
                }); //form.find()
                $("#wrapper").append(form);
                $("#email"+index).rules("add", { required:true,email:true });
            }); //addForm.on()

        }); //$(document).ready
    </script>


</head>
<body>
    <form id="myForm" name="myForm" action="" method="post" autocomplete="on">
        <div id="wrapper"></div>
        <a href="#" id="add-form">add fieldset</a>
        <input type="submit" value="Save">
    </form>
</body>
</html>

3 个答案:

答案 0 :(得分:1)

更改

form.find(".remove").on("click", function() {
   $(this).parent().remove();
}); //form.find()
$("#wrapper").append(form);

$("#wrapper").append(form);
$(".remove").unbind("click").on("click", function() {
   $(this).parent().remove();
}); //form.find()

您需要将表单放在DOM中,因此在执行之前无法绑定。 我还更改为使用$(".remove")取消绑定现有点击,并将其绑定回来,包括在新添加的点击中。

答案 1 :(得分:0)

在要创建表单的表结构中,删除字段集的锚元素不会放在表中。因此,当它被放入DOM时,删除链接将在表格之外(要删除的父元素)。

http://jsfiddle.net/SG7fG/1/

   $(document).ready(function(){
        var wrapper = $("#wrapper");
        var addForm = $("#add-form");
        var index = 0;

        $("#myForm").validate({
            errorPlacement: function(error, element) {
                error.insertAfter(element);
                //$(element).next().after(error);
                //error.appendTo( element.parent().next() );
            },
            rules: {} //rules
        }); //validate()

        var getForm = function(index, action) { //returns set of form fields as a string
        return $('\
            <div>\
            <table>\
            <tr>\
            <td> Name </td> <td> Email </td> <td> Phone </td>\
            </tr>\
            <tr>\
            <td> <input id="name' + index + '" name="name' + index + '" /></td>\
            <td><input id="email' + index + '" name="email' + index + '" /></td>\
            <td><input id="phone' + index + '" name="phone' + index + '" /></td>\
            </tr>\
            </table>\
            <a href="#" class="remove">remove fieldset</a>\
            </div>\
            ');
        }//getForm()

        addForm.on("click", function() {
            var form = getForm(++index)

            $("#wrapper").append(form);
            $("#email"+index).rules("add", { required:true,email:true });
            $(".remove").on("click", function() {
                $(this).parent().remove();
            }); //form.find()
        }); //addForm.on()

    }); //$(document).ready

答案 2 :(得分:0)

以下是删除按钮的工作示例

<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" > </script>   
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            var wrapper = $("#wrapper");
            var addForm = $("#add-form");
            var index = 0;

            $("#myForm").validate({
                errorPlacement: function(error, element) {
                    error.insertAfter(element);
                },
                rules: {}
            });

            var getForm = function(index, action) {
            return $('\
                <table id="tbl' + index +'">\
                <tr>\
                <td> Name </td> <td> Email </td> <td> Phone </td>\
                </tr>\
                <tr>\
                <td> <input id="name' + index + '" name="name' + index + '" /></td>\
                <td><input id="email' + index + '" name="email' + index + '" /></td>\
                <td><input id="phone' + index + '" name="phone' + index + '" /></td>\
                </tr>\
                <a href="#" id="remove-form' + index + '" data-index="' + index + '">remove fieldset</a>\
                </table>\
                ');
            }

            addForm.on("click", function() {
                var form = getForm(++index)
                form.find(".remove").on("click", function() {
                    $(this).parent().remove();
                }); //form.find()
                $("#wrapper").append(form);
                $("#email"+index).rules("add", { required:true,email:true });

                $("#remove-form"+index).on("click", function() {
            var currentIndex = $(this).data( "index" );
                    $("#tbl" + currentIndex).remove();
                });
            });

        }); //$(document).ready
    </script>


</head>
<body>
    <form id="myForm" name="myForm" action="" method="post" autocomplete="on">
        <div id="wrapper"></div>
        <a href="#" id="add-form">add fieldset</a>
        <input type="submit" value="Save">
    </form>
</body>
</html>