如何删除最后添加的<；输入>；使用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;

函数addInput（）{
var antal=document.getElementById（'antalfelter'）.value；
var person=document.getElementById（'persondiv'）；
antal++；
person.innerHTML=person.innerHTML
+“
”；
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;
}

函数addInput（）{
var antal=document.getElementById（'antalfelter'）.value；
var person=document.getElementById（'persondiv'）；
antal++；
person.innerHTML=person.innerHTML
+ ''
+ '';                    
document.getElementById（“antalfelter”）.value=antal；
}

如果您动态构建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)
}

函数removeLastInput（）
{
//查找所有标记：
var inputs=document.getElementById（'persondiv'）.getElementsByTagName（“输入”）
//查找最后一个有效的：
变量i=输入长度
做{
我--
var lastInput=输入[i]
}而（i>0&&lastInput.type！=“文本”）
//如果找不到正确的，请退出：
如果（i动态构建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)
}

函数removeLastInput（）
{
//查找所有标记：
var inputs=document.getElementById（'persondiv'）.getElementsByTagName（“输入”）
//查找最后一个有效的：
变量i=输入长度
做{
我--
var lastInput=输入[i]
}而（i>0&&lastInput.type！=“文本”）
//如果找不到正确的，请退出：
如果（i你可以试试这个：

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

您可以尝试以下方法：

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

这是我创建的一个可能有助于您完成任务的文档。我还向前迈出了一步，使您能够删除列表中的任何人员输入字段。我尝试记录我所能做的最好的事情，以帮助您了解我正在做的事情和试图完成的任务。希望这对您有所帮助

下面是一段代码：

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
}

函数removeLastPerson（）{
var lastIndex=getNumberOfPeople（）-1；
removePerson（最新索引）；
}
函数getNumberOfPeople（）{
//这是计算person div内的所有输入字段。
返回$（“#个人输入”）.size（）；
}
功能移除人员（索引）{
如果（getNumberOfPeople（）==1）{
警报（“无法删除最后一个人输入框”）；
返回false；
}
如果（指数<0）{
警惕（“没有人可以移动”）；
返回false；
}
//我没有使用
标记，而是使用了div标记，因为div标记会生成一个新行。当您删除一个人输入时，会留下
标记。
$（“#person_uu”+索引+“tag”）.remove（）；
reIndex（）；//在输入字段列表中删除特定的person输入字段时需要reIndex。请参阅JSFIDLE以了解reIndex函数中的情况
}
这是我创建的一个可能有助于您完成任务的文档。我还向前迈出了一步，使您能够删除列表中的任何人员输入字段。我尝试记录我所能做的最好的事情，以帮助您了解我正在做的事情和试图完成的任务。希望这对您有所帮助

下面是一段代码：

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
}

函数removeLastPerson（）{
var lastIndex=getNumberOfPeople（）-1；
removePerson（最新索引）；
}
函数getNumberOfPeople（）{
//这是计算person div内的所有输入字段。
返回$（“#个人输入”）.size（）；
}
功能移除人员（索引）{
如果（getNumberOfPeople（）==1）{
警报（“无法删除最后一个人输入框”）；
返回false；
}
如果（指数<0）{
警惕（“没有人可以移动”）；
返回false；
}
//我没有使用
标记，而是使用了div标记，因为div标记会生成一个新行。当您删除一个人输入时，会留下
标记。
$（“#person_uu”+索引+“tag”）.remove（）；
reIndex（）；//在输入字段列表中删除特定的person输入字段时需要reIndex。请参阅JSFIDLE以了解reIndex函数中的情况
}
我已经修改了一些代码，我试图保持它的简单性，最后（在阅读了Rahil Wazir使用parentNode的答案后）我得出了以下结论：

HTML:








还有我的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;
}

函数addInput（）{
var antal=document.getElementById（'antalfelter'）.value；
var person=document.getElementById（'persondiv'+antal）；
如果（antal<6）{
antal++；
person.outerHTML=person.outerHTML
+ ''
+ '';                    
document.getElementById（“antalfelter”）.value=antal；
}
}
函数removeInput（）{
var antal=document.getElementById（'antalfelter'）.value；
var person=document.getElementById（'persondiv'+antal）；
如果（antal>1）{
person.parentNode.removeChild（person）；
安塔尔；
}
document.getElementById（“antalfelter”）.value=antal；
}

…而且它能正常工作

我很高兴您的回复，它帮助我在正确的方向上使用了我的第一个JavaScript

谢谢