forms - 如何删除动态添加的texbox
问题描述
我找到了一个很好的工作示例,可以动态添加文本框并从这些输入中计算平均值,但我无法弄清楚如何删除那些添加的文本框...我知道我应该首先使用 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);
解决方案
试试下面的代码
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>
推荐阅读
- python - Matplotlib 给出 This application failed to start because it could not find or load the Qt platform plugin "xcb" in ""
- python - 当原始引用现在指向一个新值时,Python 如何知道在哪里找到创建的不可变值?
- java - (Akka HTTP)当我将 .XLSX 文件作为 Array [bytes] 发送给用户时,用户会得到文件夹
- scala - 如何用元素 3,4 ,5 填充 scala 数组?
- mysql - 如何将一列设置为 MySQL 为先前设置的行生成的数字?
- jenkins - 如何从共享库修改 Jenkins 配置?
- workflow - 使用 FreeBSD 代码库的推荐工作流程和环境是什么?
- textview - SwiftUI 成为FirstResponder
- docker - 我可以将 Ubuntu Docker 直接部署到 EC2(不在 Ubuntu 内部)吗?
- c++ - 如何对类数组进行排序?