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

I want to use the same button in a form to first add elements then remove elements

本文关键字：元素 按钮 添加 删除 然后 表单      更新时间：2023-09-26

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

    $(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>

看起来您过于简化了流程。如果您有两个按钮和两个事件处理程序，它会更简单、更容易阅读。

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后添加绑定，但这不必要地复杂，所以我认为上面的解决方案更好，可读性更强。

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

我已经修改了你的代码

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

});
相关文章：