單擊按鈕上的新輸入
[英]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.