我如何删除最后添加的<输入>使用javascript
How can I remove the last added <input> with javascript
我试图使用户能够根据需要添加和删除文本输入的形式。我已经编写了一些代码来添加文本输入,但是我不知道如何删除新添加的文本输入。
我的JavaScript代码如下:
function addInput() {
var antal = document.getElementById('antalfelter').value;
var person = document.getElementById('persondiv');
antal++;
person.innerHTML = person.innerHTML
+ '<input type="text" id="person' + antal + '" name="person' + antal + '"'
+ 'style="width: 200px; height: 25px; margin-left: 15px;" value="' + antal
+ '"><br>';
document.getElementById("antalfelter").value = antal;
我的HTML:
<form method="post" action="opretreferat.php" id="tilstede">
<input type="hidden" id="antalfelter" name="antalfelter" value="1">
<div id="persondiv">
<input type="text" id="person" name="person1" value="1"><br>
</div>
<input type="button" id="add" name="add"
value="Tilføj felt" onclick="addInput()"><br>
<input type="button" id="remove" name="remove"
value="Fjern felt" onclick="removeInput()"><br><br>
<input type="submit" id="next" name="next"
value="Næste">
</form>
我想删除最后一个文本输入,除非它是唯一剩下的。
有人能帮我吗?
(抱歉我的丹麦标签。我希望你能看穿它。
编辑
我已经把我的JavaScript改成这样,以摆脱换行:
function addInput() {
var antal = document.getElementById('antalfelter').value;
var person = document.getElementById('persondiv');
antal++;
person.innerHTML = person.innerHTML
+ '<div id="persondiv' + antal + '">'
+ '<input type="text" id="person' + antal + '" name="person' + antal + '"'
+ 'style="width: 200px; height: 25px; margin-left: 15px;" value="' + antal
+ '"></div>';
document.getElementById("antalfelter").value = antal;
}
你可以试试:
function removeInput() {
var allInputs = document.getElementById('persondiv').querySelectorAll('input[type="text"]'),
totalInputs = allInputs.length;
if (totalInputs > 1) {
allInputs[totalInputs - 1].parentNode.removeChild(allInputs[totalInputs - 1]);
}
}
如果动态地构建DOM,而不是使用innerHTML,将会有所帮助。然而,这样做仍然是可能的:
function removeLastInput()
{
// find all <input> tags:
var inputs = document.getElementById('persondiv').getElementsByTagName("input")
// find the last one that's valid:
var i = inputs.length
do {
i --
var lastInput = inputs[i]
} while(i > 0 && lastInput.type !== "text")
// if the correct one wasn't found, quit:
if(i <= 0 || lastInput.type !== "text") return;
// remove it via the parentNode:
lastInput.parentNode.removeChild(lastInput)
}
这是我创建的一个JsFiddle,它可能有助于您尝试做的事情。我还向前迈进了一步,为您提供了删除列表中任何人员输入字段的功能。我尽我所能地记录下来,以帮助你理解我在做什么,想要完成什么。希望这对你有所帮助。
下面是一小段代码:
function removeLastPerson(){
var lastIndex = getNumberOfPeople() - 1;
removePerson(lastIndex);
}
function getNumberOfPeople(){
//this is counting all of the input fields inside of the person div.
return $("#person input").size();
}
function removePerson(index){
if ( getNumberOfPeople() === 1 ){
alert("Cannot remove the last person input box");
return false;
}
if (index < 0){
alert("There are no people to remove.");
return false;
}
//instead of using <br /> tags i used div tags since div tags do make a new line. When you remove a person input the <br /> tags were left.
$("#person_" + index + "_tag").remove();
reIndex(); //reindex is needed when removing a specific person input field in a list of input fields. See JsFiddle to see what is going on in the reIndex function
}
我摆弄了一些代码,我试图保持简单,最后(在阅读Rahil Wazir回答他使用parentNode后)我想出了这个:
HTML:<form method="post" action="opretreferat.php" id="tilstede">
<input type="hidden" id="antalfelter" name="antalfelter" value="1">
<div id="persondivcontainer">
<div id="persondiv1">
<input type="text" id="person1" name="person1"
style="width: 200px; height: 25px; margin-left: 15px;"
value="1">
</div>
</div>
<input type="button" id="add" name="add"
style="width: 200px; height: 25px; margin-left: 15px;"
value="Tilføj felt" onclick="addInput()"><br>
<input type="button" id="remove" name="remove"
style="width: 200px; height: 25px; margin-left: 15px;"
value="Fjern felt" onclick="removeInput()"><br><br>
<input type="submit" id="next2" name="next2"
style="width: 200px; height: 25px; margin-left: 15px;"
value="Næste">
</form>
和我的JavaScript:
function addInput() {
var antal = document.getElementById('antalfelter').value;
var person = document.getElementById('persondiv' + antal);
if (antal < 6 ) {
antal++;
person.outerHTML = person.outerHTML
+ '<div id="persondiv' + antal + '">'
+ '<input type="text" id="person' + antal + '" name="person' + antal + '"'
+ 'style="width: 200px; height: 25px; margin-left: 15px;" value="' + antal
+ '"></div>';
document.getElementById("antalfelter").value = antal;
}
}
function removeInput() {
var antal = document.getElementById('antalfelter').value;
var person = document.getElementById('persondiv' + antal);
if (antal > 1) {
person.parentNode.removeChild(person);
antal--;
}
document.getElementById("antalfelter").value = antal;
}
…它能正常工作
我很高兴你的所有回复,它帮助我在正确的方向与我的第一个JavaScript。
谢谢大家
相关文章:
- 如何在用户输入 javascript 时更改值
- 名称href标签根据用户文本输入JavaScript
- 赢得't输入javascript if/else语句
- 使用用户输入javascript进行权重转换
- 未捕获的语法错误:输入JavaScript意外结束
- 输入javascript函数
- 在无效输入:JavaScript 上停止注册
- 输入表单 浏览并获取文件夹路径并保存在文本输入Javascript中
- 用户输入 - Javascript Node js.
- 过滤文本输入 JavaScript
- 在单击“输入 JavaScript HTML 表单”时更改焦点
- 如何在客户端验证文件输入(Javascript)
- 如何获取输入Javascript的密码值
- 可以't使用CKEditor对话框输入javascript
- 如何在html代码中输入javascript变量
- 正在验证维度文本输入javascript
- 如何输入javascript对象's值转换为sql数据库
- 如何在用户输入javascript时删除字符
- 允许用户输入javascript代码
- 基于用户输入Javascript生成HTML