HTML Javascript动态添加和删除文本框

我正在尝试使用javascript和HTML动态添加和删除文本框。 我可以让它添加和删除，但有时删除按钮不起作用。当我检查元素时，它说移除按钮没有onclick值。我不明白为什么在add函数中设置onclick

这是我的密码：

<div  id="reqs">
<h3 align = "center"> Requirements </h3>
<script>
    var reqs_id = 0;
    function removeElement(elementId,elementId2) {
        // Removes an element from the document
        var element2 = document.getElementById(elementId2);
        var element = document.getElementById(elementId);
        element2.parentNode.removeChild(element2);
        element.parentNode.removeChild(element);

    }   
    function add() {
        reqs_id++;// increment reqs_id to get a unique ID for the new element

        //create textbox
        var input = document.createElement('input');
        input.type = "text";
        input.setAttribute("class","w3-input w3-border");
        input.setAttribute('id','reqs'+reqs_id);
        var reqs = document.getElementById("reqs");
        //create remove button
        var remove = document.createElement('button');
        remove.setAttribute('id','reqsr'+reqs_id);
        remove.onclick = function() {removeElement('reqs'+reqs_id,'reqsr'+reqs_id);return false;};
        remove.setAttribute("type","button");
        remove.innerHTML = "Remove";
        //append elements
        reqs.appendChild(input);
        reqs.appendChild(remove);
    }

</script>
<button type="button" value="Add" onclick="javascript:add();"> Add</button> 

要求
var reqs_id=0；
函数removeElement（elementId，elementId2）{
//从文档中删除元素
var element2=document.getElementById（elementId2）；
var element=document.getElementById（elementId）；
element2.parentNode.removeChild（element2）；
element.parentNode.removeChild（元素）；
}   
函数add（）{
reqs_id++；//增加reqs_id以获得新元素的唯一id
//创建文本框
var input=document.createElement（'input'）；
input.type=“text”；
setAttribute（“类”，“w3输入w3边框”）；
输入.setAttribute（'id'，'reqs'+reqs_id）；
var reqs=document.getElementById（“reqs”）；
//创建删除按钮
var remove=document.createElement（'button'）；
remove.setAttribute（'id'，'reqsr'+reqs_id）；
remove.onclick=function（）{removeElement（'reqs'+reqs_id，'reqsr'+reqs_id）；返回false；}；
remove.setAttribute（“类型”、“按钮”）；
remove.innerHTML=“remove”；
//附加元素
要求追加子项（输入）；
要求追加子项（移除）；
}
添加

---

根据我先前的答案修复。另一个可能需要的选择是让每个元素知道其确切位置，并能够根据添加或删除的内容进行自我调整。通过重新调整并确保您的元素始终处于有序状态，此增强功能将解决这一问题。（如果需要）

参见示例

Html

要求
添加

Javascript

function removeElement(e) {
    let button = e.target;
    let field = button.previousSibling;
    let div = button.parentElement;
    let br = button.nextSibling;
    div.removeChild(button);
    div.removeChild(field);
    div.removeChild(br);

    let allElements = document.getElementById("reqs");
    let inputs = allElements.getElementsByTagName("input");
    for(i=0;i<inputs.length;i++){
        inputs[i].setAttribute('id', 'reqs' + (i+1));
        inputs[i].setAttribute('value', (i+1));
        inputs[i].nextSibling.setAttribute('id', 'reqsr' + (i+1));
    }
}

function add() {
    let allElements = document.getElementById("reqs");
    let reqs_id = allElements.getElementsByTagName("input").length;
    reqs_id++;

    //create textbox
    let input = document.createElement('input');
    input.type = "text";
    input.setAttribute("class", "w3-input w3-border");
    input.setAttribute('id', 'reqs' + reqs_id);
    input.setAttribute('value', reqs_id);
    let reqs = document.getElementById("reqs");

    //create remove button
    let remove = document.createElement('button');
    remove.setAttribute('id', 'reqsr' + reqs_id);
    remove.onclick = function(e) {
        removeElement(e);
    };
    remove.setAttribute("type", "button");
    remove.innerHTML = "Remove";

    //append elements
    reqs.appendChild(input);
    reqs.appendChild(remove);
    let br = document.createElement("br");
    reqs.appendChild(br);
}

函数删除元素（e）{
让按钮=e.目标；
let field=button.previousSibling；
让div=button.parentElement；
设br=button.nextSibling；
div.removeChild（按钮）；
远程儿童分部（现场）；
远程儿童分部（br）；
让Allegements=document.getElementById（“reqs”）；
让输入=Allegements.getElementsByTagName（“输入”）；
对于（i=0；i这将起作用：

<div id="reqs">
  <h3 align="center"> Requirements </h3>
</div>
<script>
  var reqs_id = 0;

  function removeElement(ev) {
    var button = ev.target;
    var field = button.previousSibling;
    var div = button.parentElement;
    div.removeChild(button);
    div.removeChild(field);
  }

  function add() {
    reqs_id++; // increment reqs_id to get a unique ID for the new element

    //create textbox
    var input = document.createElement('input');
    input.type = "text";
    input.setAttribute("class", "w3-input w3-border");
    input.setAttribute('id', 'reqs' + reqs_id);
    input.setAttribute('value', reqs_id);
    var reqs = document.getElementById("reqs");
    //create remove button
    var remove = document.createElement('button');
    remove.setAttribute('id', 'reqsr' + reqs_id);
    remove.onclick = function(e) {
      removeElement(e)
    };
    remove.setAttribute("type", "button");
    remove.innerHTML = "Remove" + reqs_id;
    //append elements
    reqs.appendChild(input);
    reqs.appendChild(remove);
  }

</script>
<button type="button" value="Add" onclick="javascript:add();"> Add</button>


要求
var reqs_id=0；
功能删除（ev）{
var按钮=电动汽车目标；
var字段=button.previousSibling；
var div=button.parentElement；
div.removeChild（按钮）；
远程儿童分部（现场）；
}
函数add（）{
reqs_id++；//增加reqs_id以获得新元素的唯一id
//创建文本框
var input=document.createElement（'input'）；
input.type=“text”；
setAttribute（“类”，“w3输入w3边框”）；
input.setAttribute（'id'、'reqs'+reqs_id）；
input.setAttribute（'值'，需求id）；
var reqs=document.getElementById（“reqs”）；
//创建删除按钮
var remove=document.createElement（'button'）；
remove.setAttribute（'id'，'reqsr'+reqs_id）；
remove.onclick=函数（e）{
移除元素（e）
};
remove.setAttribute（“类型”、“按钮”）；
remove.innerHTML=“remove”+需求id；
//附加元素
要求追加子项（输入）；
要求追加子项（移除）；
}
添加
假设您有7个输入。在调用
removeElement
时，您的
reqs_id
参数等于7，并使用参数
removeElement（'reqs7'，'reqs_id7'）调用它
。因此，您可以只删除最后一个。如果您将
reqs_id--
添加到
removeElement
函数中，您的代码将正常工作。但它超出了您表单的重点。请稍等，我会尝试给您一个适当的解决方案。我现在不在测试代码的区域，但看起来您正在删除“remove”按钮它在输入字段之前保留onclick函数，也许这就是您提出的错误所在？看起来很小，所以我不确定这是否是一个问题，但web设计有时对JS很挑剔。您是否测试了您提出的变量问题？Var应该是Javascript中的全局声明。“let”不是，而是“Var”应该。
reqs\u id
在全局范围内，所以add函数将起作用。您的示例有缺陷，因为它会在添加新字段时重置计数器
reqs\u id
。谢谢！这对我来说很有效。现在唯一的问题是，它们的所有id都是相同的。我试图获得唯一的idsTrue。是的，这是有缺陷的，也无法修复它无论哪种方式，你都是对的。每个元素都需要有一个唯一的id，然后“删除”按钮需要首先检查它正在删除的元素组id，然后删除该特定组。因此需要更多的逻辑。对不起。-我将尝试提供一个更好的示例。根据我的原始答案，修复了我猜得太快的问题。新解决方案IIt’fiddle示例很好。谢谢你，这很有效。你能帮我理解我做错了什么吗？我以前从未在javascript中见过let语句。@MatthewDecarlo现在，让我们假设
let
与
var
相同：-）如果您想了解更多信息，请在google或此处搜索var vs.let。让它工作的不是
let
，而是
removeElement
的参数，而不是您想要的。解决方案使用
事件
对象（
ev
参数）它保存了关于调用函数
ev.target
的确切元素的信息。从那里可以很好地理解发生了什么，对吗？：-）
<div id="reqs">
  <h3 align="center"> Requirements </h3>
</div>
<script>
  var reqs_id = 0;

  function removeElement(ev) {
    var button = ev.target;
    var field = button.previousSibling;
    var div = button.parentElement;
    div.removeChild(button);
    div.removeChild(field);
  }

  function add() {
    reqs_id++; // increment reqs_id to get a unique ID for the new element

    //create textbox
    var input = document.createElement('input');
    input.type = "text";
    input.setAttribute("class", "w3-input w3-border");
    input.setAttribute('id', 'reqs' + reqs_id);
    input.setAttribute('value', reqs_id);
    var reqs = document.getElementById("reqs");
    //create remove button
    var remove = document.createElement('button');
    remove.setAttribute('id', 'reqsr' + reqs_id);
    remove.onclick = function(e) {
      removeElement(e)
    };
    remove.setAttribute("type", "button");
    remove.innerHTML = "Remove" + reqs_id;
    //append elements
    reqs.appendChild(input);
    reqs.appendChild(remove);
  }

</script>
<button type="button" value="Add" onclick="javascript:add();"> Add</button>