Forms 如何删除动态添加的texbox

我发现了一个很好的例子，可以动态添加文本框并计算这些输入的平均值，但我不知道如何删除这些添加的文本框。。。我知道我应该首先使用document.getElementById来完成，但是我应该查找什么id？然后继续使用removechild命令？…我真的是个新手，你能帮我吗

在JSFIDLE上看到这里

JS

功能当前存在（选择器）{
返回文档.querySelectorAll（选择器）.length；
}
函数addNew（）{
var parent=document.getElementById（this.dataset.divname），
label=document.createElement（'label'），
输入=document.createElement（'input'），
current=currentlyExisting（'input[name=“myInputs[]”），当前，
限值=10；
if（电流<限值）{
input.type='text'；
input.name='myInputs[]'；
label.appendChild（document.createTextNode（'Subject number'+（current+1）+'：'）；
label.appendChild（输入）；
父.子（标签）；
this.disabled=currentlyExisting（'input[name=“myInputs[]”）>=limit；
}
}
函数平均值（）{
var parent=document.getElementById（'dynamicInput'），
inputs=parent.querySelectorAll（'input[name=“myInputs[]]”），
sum=Array.prototype.map.call（输入，函数（输入）{
返回parseFloat（input.value）| 0；
}).减少（功能a、b）{
返回a+b；
}, 0),
平均值=总和/输入长度；
document.getElementById（'average'）。textContent=average；
document.getElementById（'sum'）。textContent=sum；
document.getElementById（'total'）.textContent=inputs.length；
}
document.getElementById（'addNew'）。addEventListener（'click'，addNew'）；
document.getElementById（'btnCompute'）。addEventListener（'click'，average）；

尝试下面的代码

function currentlyExisting(selector) {
   return document.querySelectorAll(selector).length;
 }

 function addNew() {
    var parent = document.getElementById(this.dataset.divname),
    label = document.createElement('label'),
    input = document.createElement('input'),
    current = currentlyExisting('input[name="myInputs[]"'),
    limit = 10;

    if (current < limit) {
    input.type = 'text';
    input.name = 'myInputs[]';

    label.appendChild(document.createTextNode('Subject number ' + (current + 1) + 
    ':'));
    label.appendChild(input);

    parent.appendChild(label);

    this.disabled = currentlyExisting('input[name="myInputs[]"') >= limit;
}

 }

   function average() {
    var parent = document.getElementById('dynamicInput'),
    inputs = parent.querySelectorAll('input[name="myInputs[]"]'),
    sum = Array.prototype.map.call(inputs, function (input) {
        return parseFloat(input.value) || 0;
    }).reduce(function (a, b) {
        return a + b;
    }, 0),
    average = sum / inputs.length;

    document.getElementById('average').textContent = average;
   document.getElementById('sum').textContent = sum;
   document.getElementById('total').textContent = inputs.length;
}

  function removeRow() {
   var parent = document.getElementById(this.dataset.divname);
   parent.removeChild(parent.lastChild);

 }
 document.getElementById('addNew').addEventListener('click', addNew);
 document.getElementById('btnCompute').addEventListener('click', average);
 document.getElementById('remove').addEventListener('click', removeRow);

功能当前存在（选择器）{
返回文档.querySelectorAll（选择器）.length；
}
函数addNew（）{
var parent=document.getElementById（this.dataset.divname），
label=document.createElement（'label'），
输入=document.createElement（'input'），
current=currentlyExisting（'input[name=“myInputs[]”），当前，
限值=10；
if（电流<限值）{
input.type='text'；
input.name='myInputs[]'；
label.appendChild（document.createTextNode（'主题编号'+（当前+1）+
':'));
label.appendChild（输入）；
父.子（标签）；
this.disabled=currentlyExisting（'input[name=“myInputs[]”）>=limit；
}
}
函数平均值（）{
var parent=document.getElementById（'dynamicInput'），
inputs=parent.querySelectorAll（'input[name=“myInputs[]]”），
sum=Array.prototype.map.call（输入，函数（输入）{
返回parseFloat（input.value）| 0；
}).减少（功能a、b）{
返回a+b；
}, 0),
平均值=总和/输入长度；
document.getElementById（'average'）。textContent=average；
document.getElementById（'sum'）。textContent=sum；
document.getElementById（'total'）.textContent=inputs.length；
}
函数{
var parent=document.getElementById（this.dataset.divname）；
parent.removeChild（parent.lastChild）；
}
document.getElementById（'addNew'）。addEventListener（'click'，addNew'）；
document.getElementById（'btnCompute'）。addEventListener（'click'，average）；
document.getElementById（'remove'）。addEventListener（'click'，removeRow'）；

下面是更新的HTML

 <div id="results"> <span id="average"></span>
 <span id="sum"></span>
 <span id="total"></span>

</div>
<form method="POST" action="#">
    <div id="dynamicInput">
        <label>Subject number 1:
            <input type="text" name="myInputs[]" />
        </label>
        <label>Subject number 2:
            <input type="text" name="myInputs[]" />
        </label>
        <label>Subject number 3:
            <input type="text" name="myInputs[]" />
        </label>
        <label>Subject number 4:
            <input type="text" name="myInputs[]" />
        </label>
        <label>Subject number 5:
            <input type="text" name="myInputs[]" />
        </label>
    </div>
    <input id="addNew" data-divname="dynamicInput" type="button" value="Add a subject" />
    <input id="btnCompute" data-divname="dynamicInput" type="button" name="BtnCompute" value="Compute Average" />
     <input id="remove" data-divname="dynamicInput" type="button" value="Remove subject" />
</form>

主题1：
受试者编号2：
受试者编号3：
受试者编号4：
受试者编号5：

 <div id="results"> <span id="average"></span>
 <span id="sum"></span>
 <span id="total"></span>

</div>
<form method="POST" action="#">
    <div id="dynamicInput">
        <label>Subject number 1:
            <input type="text" name="myInputs[]" />
        </label>
        <label>Subject number 2:
            <input type="text" name="myInputs[]" />
        </label>
        <label>Subject number 3:
            <input type="text" name="myInputs[]" />
        </label>
        <label>Subject number 4:
            <input type="text" name="myInputs[]" />
        </label>
        <label>Subject number 5:
            <input type="text" name="myInputs[]" />
        </label>
    </div>
    <input id="addNew" data-divname="dynamicInput" type="button" value="Add a subject" />
    <input id="btnCompute" data-divname="dynamicInput" type="button" name="BtnCompute" value="Compute Average" />
     <input id="remove" data-divname="dynamicInput" type="button" value="Remove subject" />
</form>