我想在表單中使用相同的按鈕來首先添加元素，然後刪除元素

我正在使用一個窗體，我想要使用按鈕來添加功能到該窗體，更改按鈕的屬性，然後使用刪除那些相同的元素。我已經獲得了部分工作，添加了元素和功能，並更改了按鈕的屬性，但無法刪除添加的元素。以下是帶有表格的測試代碼。最後，我想添加元素來更新數據庫通過使用相同的按鈕添加表單，提交數據，然後刪除元素。我想在表單中使用相同的按鈕來首先添加元素，然後刪除元素

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

來源

2014-09-26 user1554967

看起來你似乎在過度複雜化。如果你有兩個按鈕和兩個事件處理程序，閱讀會更簡單和容易。

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

你的問題似乎是，因爲你的功能都沒有「上」或「活的」，這意味着綁定發生頁面上使用造成的加載。由於當時「btnRemove」不存在，因此事件處理程序永遠不會真正綁定它。當然，您可以在更改按鈕的值和ID後添加綁定，但這不必要的複雜，所以我認爲上述解決方案更好，更易讀。

來源

2014-09-26 18:40:41

您可以在這裏應用不同的邏輯。您可以使用標籤並添加條件來隱藏和顯示錶單，而不是更改標識。

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


});

來源

2014-09-26 18:41:44

我想在表單中使用相同的按鈕來首先添加元素，然後刪除元素

回答

相關問題