Question

真的没有问题，但有人可以告诉我这段代码有什么问题吗？

我试图在按钮点击时动态创建新输入框，旁边有一个新按钮。

我希望新的输入框和按钮具有不同的ID，以便我可以在之后删除它们。

加分问题：如何删除特定的输入框和按钮？

＆＃13;

var counter = 1;

function addInput(){
  var newdiv = document.createElement('div');
  newdiv.id = dynamicInput[counter];
  newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'> <input type='button' value='-' onClick='removeInput("+dynamicInput[counter]+");'>";
  document.getElementById('formulario').appendChild(newdiv);
  counter++;
}

＆＃13;

<form method="POST" id="formulario">
  <div id="dynamicInput[0]">
    Entry 1<br><input type="text" name="myInputs[]"> 
    <input type="button" value="+" onClick="addInput();">
  </div>
</form>

＆＃13;

Answer 1

此外，您还可以删除创建的元素：

<html>
<head>
<script>
var counter = 1;
var dynamicInput = [];

function addInput(){
    var newdiv = document.createElement('div');
    newdiv.id = dynamicInput[counter];
    newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'> <input type='button' value='-' onClick='removeInput("+dynamicInput[counter]+");'>";
    document.getElementById('formulario').appendChild(newdiv);
    counter++;
}
  
  function removeInput(id){
    var elem = document.getElementById(id);
    return elem.parentNode.removeChild(elem);
  }
</script>
</head>
<body>
<form method="POST" id="formulario">
     <div id="dynamicInput[0]">
        Entry 1<br><input type="text" name="myInputs[]"> 
        <input type="button" value="+" onClick="addInput();">
    </div>
</form>
</body>
</html>

Answer 2

您的代码中存在错误：

未捕获的ReferenceError：未定义dynamicInput

您需要先定义dynamicInput。

＆＃13;

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var counter = 1;
var dynamicInput = [];

function addInput(){
    var newdiv = document.createElement('div');
    newdiv.id = dynamicInput[counter];
    newdiv.innerHTML = "<section onclick='$(this).remove();'>Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'> <input type='button' value='-'></section>";

    document.getElementById('formulario').appendChild(newdiv);
    counter++;
}
</script>
</head>
<body>
<form method="POST" id="formulario">
     <div id="dynamicInput[0]">
        Entry 1<br><input type="text" name="myInputs[]"> 
        <input type="button" value="+" onClick="addInput();">
    </div>
</form>
</body>
</html>

＆＃13;

＆＃13; 要删除输入，只需添加一个带有$(this).remove()的事件处理程序的部分。您将需要jQuery来执行此操作。上面的代码段已包含以下内容。

Answer 3

如果您想要添加/删除，则根本不需要计数器和ID。您可以使用传递给方法的this获取相关输入。

＆＃13;

<html>
  <head>
    <script>

      function addInput(){
        var newdiv = document.createElement('div');
        //newdiv.id = dynamicInput[counter];
        newdiv.innerHTML = "Entry <br><input type='text' name='myInputs[]'> <input type='button' value='-' onClick='removeInput(this);'>";
        document.getElementById('formulario').appendChild(newdiv);
      }

      function removeInput(btn){
          btn.parentNode.remove();
      }

    </script>
  </head>
  <body>
    <form method="POST" id="formulario">
      <div>
        Entry 1<br><input type="text" name="myInputs[]"> 
        <input type="button" value="+" onClick="addInput();">
      </div>
    </form>
  </body>
</html>

＆＃13;

Answer 4

不是从头开始创建元素，而是通过克隆第一组元素来使用已有的元素。详细信息在Snippet中进行了评论。

<强>段

/* The original dynamic input 
|| is hiding it's remove button
|| so the first input never gets 
|| deleted
*/

#dynInp0 input:last-of-type {
  display: none;
}
input {
  font: inherit;
}
[type='text'] {
  width: 20ch;
  line-height: 1.1;
}
[type='button'] {
  width: 2.5ch;
  height: 2.7ex;
}

<html>

<head>
  <script>
    var counter = 0;

    function addInput() {
        var form = document.getElementById('formulario');
        // Increment counter
        counter++;
        // Reference dynamic input
        var template = document.getElementById('dynInp0');
        // Clone dynamic input
        var clone = template.cloneNode(true);
        /* Reassign clone id to the string "dynInp"...
        ||...concatenated to the current value of counter
        */
        clone.id = "dynInp" + counter;
        // Reference the first child of clone (<label>)
        var tag = clone.children[0];
        /* Change tag's text to the string "Entry "...
        ||...concatenated to the current value of counter
        */
        tag.textContent = "Entry " + counter;
        // Reference the 5th child of dynInp (<input>)
        var rem = clone.children[4];
        // Change button display to `inline-block'
        rem.style.display = 'inline-block';
        // Append clone to <form>
        form.appendChild(clone);
      }
      /* Pass the obj ele...
      ||...Reference <form>...
      ||...Reference the parent of ele...
      ||...Remove parent from <form>
      */

    function removeInput(ele) {
      var form = document.getElementById('formulario');
      var parent = ele.parentNode;
      var removed = form.removeChild(parent);
    }
  </script>
</head>

<body>
  <form method="POST" id="formulario">
    <div id="dynInp0">
      <label>Entry 0</label>
      <br>
      <input type="text" name="myInputs[]">
      <input type="button" value="+" onclick="addInput();">
      <input type='button' value="-" onclick='removeInput(this);'>
    </div>
  </form>
</body>

</html>

点击按钮

4 个答案: