单击按钮上的新输入

Question

really noob question, but can someone tell me what's wrong with this code? 真的是菜鸟问题，但是有人可以告诉我这段代码有什么问题吗？

I'm trying to create, dynamically on button click, new input boxes with a new button on the side. 我正在尝试动态创建按钮单击时侧面带有新按钮的新输入框。

I want the new input boxes and buttons to have distinct IDs so I can delete them after. 我希望新的输入框和按钮具有不同的ID，以便以后将其删除。

Bonus question: How would I go about deleting a specific input box and button? 奖励问题：如何删除特定的输入框和按钮？

 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++; }

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

Answer 1

Additionally, you can also delete the created element: 此外，您还可以删除创建的元素：

 <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

There is an error in your code: 您的代码中有错误：

Uncaught ReferenceError: dynamicInput is not defined 未捕获的ReferenceError：未定义dynamicInput

You need to define dynamicInput first. 您需要先定义dynamicInput 。

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

To delete an input, simply add a section with an event handler with $(this).remove() . 要删除输入，只需使用$(this).remove()添加带有事件处理程序的部分。 You will require jQuery to do this. 您将需要jQuery来执行此操作。 The snippet above contains the following already. 上面的代码段已经包含以下内容。

Answer 3

You don't need a counter and ids at all if adding/removing is all you want. 如果只需要添加/删除，则根本不需要计数器和ID。 You can get relevant inputs using this passed to the methods. 您可以使用this方法传递给相关输入。

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

Answer 4

Instead of creating elements from the start, use what you already have by cloning the first group of elements. 与其从头开始创建元素，不如通过克隆第一组元素来使用已有的元素。 Details are commented in Snippet. 在代码段中评论了详细信息。

SNIPPET 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 个解决方案

解决方案1
2 已采纳 2017-02-03 01:55:16

解决方案2
1 2017-02-03 01:50:08

解决方案3
1 2017-02-03 02:13:35

解决方案4
1 2017-02-03 03:19:39

单击按钮上的新输入

问题描述

4 个解决方案

解决方案1 2 已采纳 2017-02-03 01:55:16

解决方案2 1 2017-02-03 01:50:08

解决方案3 1 2017-02-03 02:13:35

解决方案4 1 2017-02-03 03:19:39

解决方案1
2 已采纳 2017-02-03 01:55:16

解决方案2
1 2017-02-03 01:50:08

解决方案3
1 2017-02-03 02:13:35

解决方案4
1 2017-02-03 03:19:39