单击按钮上的新输入
[英]New input on button click
问题描述
真的是菜鸟问题，但是有人可以告诉我这段代码有什么问题吗？
我正在尝试动态创建按钮单击时侧面带有新按钮的新输入框。
我希望新的输入框和按钮具有不同的ID，以便以后将其删除。
奖励问题：如何删除特定的输入框和按钮？
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>
4 个解决方案
解决方案1
2 已采纳 2017-02-03 01:55:16
此外，您还可以删除创建的元素：
<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>
解决方案2
1 2017-02-03 01:50:08
您的代码中有错误：
未捕获的ReferenceError：未定义dynamicInput
您需要先定义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>
$(this).remove()添加带有事件处理程序的部分。
您将需要jQuery来执行此操作。
上面的代码段已经包含以下内容。
解决方案3
1 2017-02-03 02:13:35
如果只需要添加/删除，则根本不需要计数器和ID。 您可以使用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>
解决方案4
1 2017-02-03 03:19:39
与其从头开始创建元素，不如通过克隆第一组元素来使用已有的元素。 在代码段中评论了详细信息。
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>
如何在按钮单击时添加输入并创建新的 append 删除按钮以删除新输入？
[英]How to add input on button click and create the new append a remove button to remove the new input?
单击添加新时启用输入，单击创建按钮后禁用输入
[英]Enable the input when click add new and Disable the input after click the create button
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.