Javascript （JS）如何删除动态创建的最后一个元素？_Javascript_Html

Javascript （JS）如何删除动态创建的最后一个元素？

javascript html

Javascript （JS）如何删除动态创建的最后一个元素？,javascript,html,Javascript,Html,我有一个动态表单，您可以在其中动态添加文本字段。它可以工作，但问题是我实现的delete按钮会清除整个表单，而我希望它只清除创建的最后一项这是我的密码： <!DOCTYPE html> <html> <body> <div id="Form1"></div> <button type="button" onClick="createNode1()">+</button> <button type="

我有一个动态表单，您可以在其中动态添加文本字段。

它可以工作，但问题是我实现的delete按钮会清除整个表单，而我希望它只清除创建的最后一项

这是我的密码：

<!DOCTYPE html>
<html>

<body>
<div id="Form1"></div>

<button type="button" onClick="createNode1()">+</button>
<button type="button" onClick="deleteNode1()">-</button>

<script>
function createNode1(){
var input = document.createElement("input");
input.type = "text"; 
input.placeholder = "Enter Text Here";
document.getElementById("Form1").appendChild(input); // put it into the DOM
}
//CLEARS THE FORM IF YOU MADE A MISTAKE
function deleteNode1(){
    var node = document.getElementById('Form1');
    while (node.hasChildNodes()) {
    node.removeChild(node.lastChild);
    }
}
</script>
</body>

</html>


+
-
函数createNode1（）{
var输入=document.createElement（“输入”）；
input.type=“text”；
input.placeholder=“在此处输入文本”；
document.getElementById（“Form1”）.appendChild（输入）；//将其放入DOM
}
//如果您犯了错误，请清除表单
函数deleteNode1（）{
var node=document.getElementById（'Form1'）；
while（node.hasChildNodes（））{
node.removeChild（node.lastChild）；
}
}

只要删除while循环，只要还有剩余的子节点，它就会迭代并删除所有的子节点

function deleteNode1(){
    var node = document.getElementById('Form1');
    if (node.hasChildNodes())
         node.removeChild(node.lastChild);
}

只要删除while循环，只要还有剩余的子节点，它就会迭代并删除所有的子节点

function deleteNode1(){
    var node = document.getElementById('Form1');
    if (node.hasChildNodes())
         node.removeChild(node.lastChild);
}

如adeneo所说，或者为了避免表单1为空时出现JS错误，请将

替换为如果：
function deleteNode1(){
    var node = document.getElementById('Form1');
    if(node.hasChildNodes()) {
        node.removeChild(node.lastChild);
    }
}

正如Adneo所说，或者为了避免表单1为空时出现JS错误，请将而替换为如果：
function deleteNode1(){
    var node = document.getElementById('Form1');
    if(node.hasChildNodes()) {
        node.removeChild(node.lastChild);
    }
}

“我实现的删除按钮”-->while（node.hasChildNodes（））
有趣…为什么在deletenode代码中循环？”“我实现的删除按钮”-->while（node.hasChildNodes（））
有趣…为什么在deletenode代码中循环？注意，如果在表单1为空时单击[-]，您会得到“执行'removeChild'失败”警告，如果在#Form1为空时单击[-]，则会得到“执行'removeChild'失败”