如何通过一个按钮添加一个或多个表单并通过javascript通过另一个按钮将其删除答案

【问题标题】：How to add one or more form by a button and remove it by another button by javascript如何通过一个按钮添加一个或多个表单并通过javascript通过另一个按钮将其删除
【发布时间】：2019-02-01 19:55:35
【问题描述】：

我想通过一个按钮添加一个或多个表单，并通过 javascript 通过另一个按钮将其删除。按一次该按钮创建一个表单再次按下该按钮，然后它通过一个按钮创建相同的表单。我可以将它们的值插入到数据库中。

【问题讨论】：

你有代码示例吗？我们最好为您提供正确的帮助
欢迎来到 Stackoverflow。请注意，Stackoverflow 不是一个编程服务，它是一个帮助程序员解决他们遇到的特定问题的社区。请尝试编写您自己的代码，如果您有任何问题，请发布代码。
需要代码或您已经尝试过的东西吗？
欢迎来到 StackOverflow arpit。请阅读有关如何提出好问题的文章。这个问题显然应该是建设性的，并且应该至少包含您尝试过的一些代码。请阅读 [指南][1] 以了解有关该主题的更多信息。 [1]：stackoverflow.com/help/how-to-ask

标签： javascript php html css codeigniter

【解决方案1】：

<script type="text/javascript">

$(document).ready(function(){

    var counter = "2";
		
    $("#addButton").click(function () {
				
	if(counter>10){
            alert("Only 10 textboxes allow");
            return false;
	}   
		
	var newTextBoxDiv = $(document.createElement('div'))
	     .attr("id", 'TextBoxDiv' + counter);
        
	newTextBoxDiv.after().html('<label style="margin-right:5.9%">Nature Of Income '  +  ' : </label>' +'<input type="text" name="NatureIncome' +   
	      '" id="textbox'   + '" value="" ><br>' + '<br><label style="margin-right:10.2%">Total Amount' + ': </label>'+'<input type="text"  name="TotalAmount' +   
	      '" id="textbox'   + '" value="" ><br><hr style="border: 1px solid black;">' );
            
	newTextBoxDiv.appendTo("#TextBoxesGroup");

				
	counter++;
     });

     $("#removeButton").click(function () {
	if(counter==1){
          alert("No more textbox to remove");
          return false;
       }   
        
	counter--;
			
        $("#TextBoxDiv" + counter).remove();
			
     });
		
  });
    </script>

【讨论】：

【解决方案2】：

$("#add_button").click(function(){
  var intial_field = $(this).data("intial");
  var content = '<div id="input_'+intial_field+'"><input type="text" name="user_name[]" /><button id="remove_btn" data-remove="'+intial_field+'">X</button></div>';
  $("#recurssion_container").append(content);
  $(this).data("intial",intial_field+1);
});
$(document).on("click","#remove_btn",function(){
  var remove_element = $(this).data("remove");
  $("#input_"+remove_element).remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="add_button" data-intial="0">+ Add</button>
<form action="index.php" method="post">
<div id="recurssion_container"></div>
<input type="text" name="user_name[]" />
<button type="submit" name="save">Save</button>
</form>

<?php
if(isset($_POST["save"])){
    $user_name_array = $_POST["user_name"];
    foreach($user_name_array as $user_name){
        if($user_name!=""){
            #Put your insert query here
            #Please refer how to save data to database https://www.w3schools.com/php/php_mysql_insert.asp
        }
    }
}
?>

【讨论】：

也可以通过检查变量 intial_field 来限制添加的字段数
我想将每一行数据插入数据库请告诉我怎么做