使用 javascript 添加和删除表单行答案

【问题标题】：adding and deleting form rows with javascript使用 javascript 添加和删除表单行
【发布时间】：2017-12-11 08:06:49
【问题描述】：

我创建了一个表单，其中添加按钮 adds 另一行，其中包含姓名、电子邮件和年龄，然后 delete 将其删除。但是，jquery 代码不能按预期工作。我是 jquery 的初学者，想弄清楚我犯了什么错误。我在 Stackoverflow 中查看了类似的问题，但无法弄清楚。

$(document).ready(function(){
    	var max_fields= 10;
    	var wrapper  = $("#commentForm");
    	var add_button = $("#addButton");
    	var delete_button = $('#deleteButton')
    	
    	
    	var x=1;
    	add_button.click(function(e){
    		e.preventDefault();
    		
    		if (x < max_fields){
    			x++;
    			$(wrapper).append('<input id="bname" name="name" minlength="2" type="text" required/>', '<input id="bemail" name="email" type="email" required/', '<input id="bage" name="age" type="number" required/>' )
    		}
    	
    	});
    		$(wrapper).on("click","#deleteButton", function(e){
    		
    			e.preventDefault();$(this).parent('p').remove();
    			x--;
    		
    		})
    	
    	
    	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
    <section class="container">
    	<form class="cmxform" id="commentForm" method="get" action="form-handler.html" autocomplete="">
    	<fieldset>
    		<input type="checkbox"/>
    		
    		<p>
    			<span> Name </span> <br>
    			<label for="aname" ></label>
    			<input id="bname" name="name" minlength="2" type="text" required/>
    		</p>
    		<p>
    			<span> Email </span> <br>
    			<label for="aemail" ></label>
    			<input id="bemail" name="email" type="email" required/>
    		</p>
    		<p>
    			<span> Age </span> <br>
    			<label for="aage" ></label>
    			<input id="bage" name="age" type="number" required/>
    		</p>
    		
    			
    		<div class="input_fields_wrap">
    		
    			<div class="addButton">
    				<button  type="button" value="add">Add</button>
    			</div>
    		
    			<div class="deleteButton">
    				<button type="button" value="delete">Delete</button>
    			</div>
    		</div>
    		
    		
    	
    	</fieldset>
    	</form>
    	
    	</section>   	
    	
    		
    			
    
    </body>

谢谢。

【问题讨论】：

这个bname id 将重复 ID 在上下文中应该是唯一的
您的 HTML 有一些错误，您可以先修复它们，如大写  不能用  关闭，只需将所有 HTML 写成小写即可。  不是标签，是  、  或  
完成。感谢您发现这些错误。

标签： jquery html

【解决方案1】：

所以，有些东西不如你拥有。

ID应该是唯一的
如果你有<label>，为什么要使用
您可以使用name="value[]" 关注[]，因此如果您提交表单，您将在服务器上获得一系列值，这真是太棒了
您需要干净的 HTML！因为是的，大写/小写确实很重要
如果你有一个 ID jQuery 选择器是# 所以$('#my-id') 如果你有一个类它是一个. 所以$('.my-class')

现在我已经对其进行了更改，并尝试使其保持简单，因此应该很容易看到发生了什么。

围绕您想要复制/复制的那些字段进行包装。如果它们几乎相同，只需复制 <div> 并插入它
删除了所有 ID（希望您不需要它们）否则无论如何您都需要清理它们。
使用小 CSS 隐藏第一个字段的删除按钮
为每个字段插入删除按钮，因为大多数用户会单击多次添加，然后插入数据，然后看到他们不需要所有字段，因此他们想删除空的字段。如果他们可以将单个删除一个更简单

玩这个代码：

$(document).ready(function(){
  var max_fields= 10;
  var counter = 0;
  
  $('.addButton').on('click', function(){
      counter++;
      if(counter >= max_fields) {
          return;
      }
      
      var copy = $('.form-copy-wrap').first().clone();
      copy.find('.delete').removeAttr('disabled');
      $("#commentForm fieldset").append(copy);
  });
  
  $(document).on('click', '.delete', function(){
      $(this).closest('.form-copy-wrap').remove();
  });
});

.delete[disabled] {
    display: none;
}

.form-copy-wrap {
    border: dashed 1px #afafaf;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
    <form class="cmxform" id="commentForm" method="get" action="form-handler.html" autocomplete="">
    <fieldset>
        <input type="checkbox"/>

<div class="form-copy-wrap">
        <p>
            <label for="aname" >Name</label>
            <input name="name[]" minlength="2" type="text" required/>
        </p>
        <p>
            <label for="aemail" >Email</label>
            <input name="email[]" type="email" required/>
        </p>
        <p>
            <label for="aage" >Age</label>
            <input name="age[]" type="number" required/>
        </p>
        <button class="delete" type="button" value="delete" disabled="disabled">Delete</button>
</div>

        <div class="input_fields_wrap">
            <div class="addButton">
                <button  type="button" value="add">Add</button>
            </div>
        </div>



    </fieldset>
    </form>

用复选框删除：

$(document).ready(function(){
  var max_fields= 10;
  var counter = 0;
  
  $('.addButton').on('click', function(){
      counter++;
      if(counter >= max_fields) {
          return;
      }
      
      var copy = $('.form-copy-wrap').first().clone();
      copy.find('input[name^="delete"]').prop( "checked", false );
      $("#commentForm fieldset").append(copy);
  });
  
  $(document).on('click', '.delete', function(){
      $('input[name^="delete"]:checked').closest('.form-copy-wrap').remove();
  });
  
  $(document).on('change', 'input[name^="delete"]', function(){
      if($('input[name^="delete"]:checked').length >= 1) {
          $('.delete').removeAttr('disabled');
      } else {
          $('.delete').attr('disabled', 'disabled');
      }
  });
});

.delete[disabled] {
    opacity: 0.5;
}

.form-copy-wrap {
    border: dashed 1px #afafaf;
}

#commentForm .form-copy-wrap:first-child p:first-child {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
    <form class="cmxform" id="commentForm" method="get" action="form-handler.html" autocomplete="">
    <fieldset>

<div class="form-copy-wrap">
        <p>
            <label>
              <input type="checkbox" name="delete[]" value="delete" />
              Delete this row
            </label>
        </p>

        <p>
            <label for="aname" >Name</label>
            <input name="name[]" minlength="2" type="text" required/>
        </p>
        <p>
            <label for="aemail" >Email</label>
            <input name="email[]" type="email" required/>
        </p>
        <p>
            <label for="aage" >Age</label>
            <input name="age[]" type="number" required/>
        </p>
        
</div>

        <div class="input_fields_wrap">
            <div class="addButton">
                <button  type="button" value="add">Add</button>
            </div>
            <button class="delete" type="button" value="delete" disabled="disabled">Delete</button>
        </div>



    </fieldset>
    </form>

【讨论】：

也非常感谢您的解释。让人更清楚明白。但是，我有一个问题，如果我想添加一个复选框，以便当我想通过勾选复选框并按下按钮“删除”而不是每个正在添加的新字段中的删除按钮来删除添加的框时。我可以这样做通过在 jQuery 中修改此部分？ $(document).on('click', '.delete', function(){ $(this).closest('.form-copy-wrap').remove(); });当然，我需要将复选框标签放在 div 类“form-copy-wrap”标签中。还可能修改html中的删除按钮标签？
@BibekSharma 用删除复选框更新了答案。使一些事情变得更复杂一些。就像如果用户单击复选框然后提交表单会发生什么？只是你应该考虑的事情。快乐编码

【解决方案2】：

你可以这样做

<body>
<section class="container">
    <form class="cmxform" id="commentForm" method="get" action="form-handler.html" autocomplete="">
    <fieldset>
        <input type="checkbox"/>
          <div id="rows">
        <P>
            <span> Name </span> </br>
            <label for="aname" ></label>
            <input id="bname" name="name" minlength="2" type="text" required/>
        </p>
        <P>
            <span> Email </span> </br>
            <label for="aemail" ></label>
            <input id="bemail" name="email" type="email" required/>
        </p>
        <p>
            <span> Age </span> </br>
            <label for="aage" ></label>
            <input id="bage" name="age" type="number" required/>
        </p>
        </div>

        <div class="input_fields_wrap">

            <div>
                <button id="addButton"  type="button" value="add">Add</button>
            </div>

            <div>
                <button  id="deleteButton" type="button" value="delete">Delete</button>
            </div>
        </div>



    </fieldset>
    </form>

    </section>

    <script>
    $(document).ready(function(){
    var max_fields= 10;
    var wrapper  = $("#commentForm");
    var add_button = $("#addButton");
    var delete_button = $('#deleteButton');
    var rows  = $("#rows");


    var x=1;
    add_button.click(function(e){
        e.preventDefault();

        if (x < max_fields){
            x++;
            rows.append('<p><input id="bname" name="name" minlength="2" type="text" required/>', '<input id="bemail" name="email" type="email" required/>', '<input id="bage" name="age" type="number" required/></p>' )
        }

    });
        delete_button.click(function(e){

            e.preventDefault();
            $( "#rows p" ).last().remove();
            x--;

        })


    });


    </script>



</body>

【讨论】：

谢谢。 #rows 是否添加在 html 文件中的某处？
是的，我把
放在

你检查代码。你会找到的
我已经更新了我使用按钮而不是类的 id 的答案，因为你像这样访问它 $("#addButton") # 用于 id 和 .用于类