Javascript 添加和删除额外表单

因此，我正在创建一个表格，将学生的姓名和成绩输入数据库。条目的数量会有所不同，因此我希望页面加载1行，在该行中可以输入数据，并在底部添加+和-按钮，在该按钮中可以添加或删除用于输入数据的额外行

我尝试过添加，但几乎没有成功，我真的不知道如何删除多余的行。从视觉上看，它看起来很棒，但是点击底部的按钮什么也做不了。任何想法都将不胜感激

这是我的密码：

<center>
<form action= "submit_results.php">

<div class="col-sm-12">
  <table>
    <tr>
      <td><h3>NAME OF PUPIL</h3></td>
      <td><h3>RESULT</h3></td>
    </tr>
</table>
<input type="text" name="name_pupil" id="i">
<input type="text" name="result" id="j">
    <br>
    <br>
    <a class="btn btn-info btn-lg" onclick="add_new_row">
      <span class="glyphicon glyphicon-plus"></span>
    </a>
    <a class="btn btn-info btn-lg" onclick="remove_new_row">
      <span class="glyphicon glyphicon-minus"></span>
    </a>
    <br>
    <br>
<input type="submit" value="Submit">
</div>
</form>
</center>

<script>
var i=0
var j=100
// i want different id numbers for the name of the pupil and their results where results=pupils+100 there will not be more than 100 entries
function add_new_row(){
  for (i++){
  container.appendChild(document.createTextNode("player" + (i+1)));
  var input = document.createElement("input");
  input.type = "text";
  input.name = "member" + i;
  container.appendChild(input);
  // Append a line break
  container.appendChild(document.createElement("br"));

}

function remove_new_row(){
//dont know how to remove them!!
}
</script>

学生姓名
结果








变量i=0
var j=100
//我想为学生的名字和他们的结果使用不同的id号，如果结果=学生+100，则不会有超过100个条目
函数add_new_row（）{
for（i++）{
container.appendChild（document.createTextNode（“player”+（i+1））；
var输入=document.createElement（“输入”）；
input.type=“text”；
input.name=“member”+i；
container.appendChild（输入）；
//附加换行符
container.appendChild（document.createElement（“br”））；
}
函数remove\u new\u row（）{
//不知道如何移除它们！！
}

我将简化您的示例，假设您只有一个容器div，您想在其中添加和删除行。行可以是任何内容，在您的示例中，它是输入行

<div id="container"></div>
<button id="addRow">Add row</button>

在这里，您可以看到它的作用：

逻辑在javascript的最后两行—当您添加一行时，添加一个按钮，该按钮的任务是在单击该行时删除该行。将该按钮放在该行旁边是有意义的，因此将其放在相同的

div

中即可

对于您现有的输入行（那些不是通过点击

adder

按钮添加的），您只需要在Javascript代码中直接向这些按钮添加逻辑。因此-您可以为

remover

按钮提供一个类（“remover”）然后直接向所有这些按钮添加一个处理程序

var removers = document.querySelectorAll( 'button.remover' )
for ( var i = 0; i < removers.length; i++ ) {
  removers[ i ].onclick = function ( e ) {
    var row = e.target.parentNode
    row.parentNode.removeChild( row ) 
  } 
}

var removers=document.querySelectorAll（'button.remover'）
对于（变量i=0；i

所以每个按钮都会找到它的父项并将其删除

---

更新的提琴：

删除一行后，你不应该更新div和计数器吗？因为用户可以很容易地得到#1、#3、#8、#10，所有跳过的数字！我认为这将是一个完全不同的问题答案，不？无论如何，我只想尽可能简单/快速地回答手头的问题，而你的建议绝对是moWe’很复杂！我认为如果所有条目都有不同的ID，那么编号就不会太重要了，因为它只需要输入到数据库中，非常感谢这是一次生命拯救！！现在只需使用引导程序使其看起来很好！

var removers = document.querySelectorAll( 'button.remover' )
for ( var i = 0; i < removers.length; i++ ) {
  removers[ i ].onclick = function ( e ) {
    var row = e.target.parentNode
    row.parentNode.removeChild( row ) 
  } 
}