Question

我正在尝试使用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>

Answer 1

这将有效：

<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>

Answer 2

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

请参阅JSFiddle示例。

HTML

<div id="reqs">
   <h3>Requirements</h3>
   <button type="button" value="Add" onclick="javascript:add();">Add</button>
   <br>
</div>

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

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

2 个答案: