Question

我找到了一个很好的示例，其中可以动态添加文本框并从这些输入中计算平均值，但是我不知道如何删除那些添加的文本框...我知道我应该首先使用document.getElementById进行操作，但是我应该找什么身份证？然后继续执行removechild命令？...我真的是新手，您能帮我吗？

请参见JSFiddle http://jsfiddle.net/davidThomas/vzftsz3a/1/

JS

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;
}

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

Answer 1

尝试下面的代码

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);

下面是更新的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>

如何删除动态添加的texbox

1 个答案: