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

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”而引起的，这意味着绑定(bind)发生在页面加载时。由于当时“btnRemove”不存在，因此事件处理程序从未真正绑定(bind)到它。当然，您可以在更改按钮的值和 id 后添加绑定(bind)，但这不必要地复杂，因此我认为上述解决方案更好且更具可读性。