Как удалить динамически добавленный тексбокс

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>