Question

我正在处理一个表单，我想使用一个按钮向该表单添加功能，更改按钮的属性然后使用删除那些相同的元素。我已经得到了工作部分，它添加了元素和功能，并更改了按钮的属性，但我无法删除添加的元素。下面是表单的测试代码。最后我想添加元素来更新数据库，使用相同的按钮添加表单，提交数据然后删除元素。

    $(function(){
            $("#addform").click(function(){
                var adddiv = $("<div>").attr('id','addediv').addClass("incident").append(
                    $("<label>").addClass("title").text("TO BE COMPLETED BY THE SUPERVISOR"),
                    $("<div>").append(
                        $("<input>").attr("type", "text").attr("id",   "incidate").addClass("datepick")

                        )
                    );
                $(".incident").remove();
                $("form").append(adddiv);
                $(function(){
                    $(".datepick").datepicker({
                        changeMonth: true,
                        changeYear: true
                    });
                    }
                );
                $("#addform").attr('value','Remove Form').attr('id','removeForm');

            });
        });

        $(function(){
            $("#removeForm").click(function(){
                $("#addediv").remove();  
            })
        })

     </script>


 <form>
   <input type="button" id="addform" value="Add form" />
 </form>

Answer 1

看起来你的过程太复杂了。如果你有两个按钮和两个事件处理程序，它会更简单，更容易阅读。

HTML：

<input type="button" id="btnAdd" Value="Add"/>
<input type="button" id="btnRemove" Value="Remove" />

jQuery的：

$("#btnAdd").click(function(){
    $(this).css("display", "none");
    $("#btnRemove").css("display", "inline-block");
    //Add your stuff here
});

$("#btnRemove").click(function(){
    $(this).css("display", "none");
    $("#btnAdd").css("display", "inline-block");
    //Remove your stuff here
});

您的问题似乎是由于您的函数未使用“on”或“live”而导致的，这意味着绑定发生在页面加载上。由于此时“btnRemove”不存在，因此事件处理程序永远不会真正绑定它。当然，您可以在更改按钮的值和ID后添加绑定，但这不必要地复杂，因此我认为上述解决方案更好，更易读。

Answer 2

您可以在此处应用不同的逻辑。您可以使用标签并添加条件来隐藏和显示表单，而不是更改ID。

我有modified your code

$(function() {

$("#addform").click(function() {

    if ($("#addform").attr('value') != "Remove Form") {

        var adddiv = $("<div>").attr('id', 'addediv').addClass("incident").append(
        $("<label>").addClass("title").text("TO BE COMPLETED BY THE SUPERVISOR"),
        $("<div>").append(
        $("<input>").attr("type", "text").attr("id", "incidate").addClass("datepick")

        ));
        $(".incident").remove();
        $("form").append(adddiv);

        $("#addform").attr('value', 'Remove Form');

    } else {
        $("#addediv").remove();
        $("#addform").attr('value', 'Add form');
    }
 });


});

我想在表单中使用相同的按钮来首先添加元素然后删除元素

2 个答案: