javascript - 添加和删​​除额外的表单

Question

所以我正在创建一个表单来将学生姓名及其结果输入数据库。条目数量会有所不同，所以我希望页面加载 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>

Answer 1

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

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

没有删除按钮。因为您如何知道要删除哪一行？删除程序必须获取对其要删除的行的引用。这是一种方法，通过在同一函数中创建它们:

var idCounter, adder, container

idCounter = 0
adder = document.getElementById( "addRow" )
container = document.getElementById( "container" )

adder.onclick = function () {
   var input, remover, row

   input = document.createElement( 'input' )
   input.type = "text"
   input.name = "member_" + ( ++idCounter )
   input.placeholder = "Add details for member #" + idCounter + "..."

   remover = document.createElement( 'button' )
   remover.textContent = "Remove row"

   row = document.createElement( 'div' )
   row.appendChild( input )
   row.appendChild( remover )

   container.appendChild( row )

   remover.onclick = function ( ) {
     container.removeChild( row ) 
   }
}

在这里您可以看到它的实际效果:https://jsfiddle.net/ea1trbeb/

逻辑位于 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 ) 
  } 
}

因此每个按钮都会找到其父级按钮并将其删除。

更新的 fiddle :https://jsfiddle.net/y2wa77y7/