动态添加/删除表单的新输入

Question

所以我是一个初学者，正如标题所说，我希望能够；单击按钮后，允许用户向我的表单添加另一个输入字段。我也希望能够删除这个。

该表格的用途是将学生添加到学生组中，然后我将其存储在我的数据库中。

我的表单示例：

<form name="addstudents" id="addstudents" method="post" action="add_students.php">
<table><tr><td>Student:</td><td>
<input type='text' name="1" size='20'></td><td><input type="button" id="add" value="+">    
</td><td><input type="button" id="remove" value="-"></td>
</table></form>

但是，从我一直在查看的内容来看，有不同的建议，例如使用clone()函数或Jqueryappendto()。

这样做的最佳方法是什么？

谢谢

Answer 1

$('form').append('<input ...'); //take care of appending valid DOM elements

Answer 2

//Create the input element
var $el = $('<input>')//Set the attribute that you want
                      .attr('id','inputID')
                      .attr('readonly',true);
//And append it to the form
$('#addstudents').append($el);

Answer 3

请记住，您还可以从表单中删除任何 DOM，只需找到适当的 jquery 选择器，

$('form > input:last').remove(); // to remove last input

检查此工作示例，该示例是在jsfiddle.net 来帮助您解决此问题

Answer 4

我会使用 JavaScript，我已经在此处回答了这个问题。只需使用纯 JavaScript 来编辑页面的 HTML。希望这有帮助！