我如何删除最后添加的<输入>使用javascript

How can I remove the last added <input> with javascript

本文关键字:输入 javascript 使用 添加 何删除 删除 最后      更新时间:2023-09-26

我试图使用户能够根据需要添加和删除文本输入的形式。我已经编写了一些代码来添加文本输入,但是我不知道如何删除新添加的文本输入。

我的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。

谢谢大家