按鈕單擊的新輸入

真的很麻煩，但有人能告訴我這段代碼有什麼問題嗎？按鈕單擊的新輸入

我試圖創建，按鈕點擊動態，新的輸入框與一側的新按鈕。

我想新的輸入框和按鈕有不同的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>

來源

2017-02-03 X3minater

此外，您也可以刪除創建的元素：

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

來源

2017-02-03 01:55:16

。在你的代碼中的錯誤：

Uncaught ReferenceError: dynamicInput is not defined

您需要定義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來做到這一點。上面的代碼片段已經包含以下內容。

來源

2017-02-03 01:50:08

你並不需要一個計數器和IDS在所有如果添加/刪除是所有你想要的。您可以使用傳遞給方法的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>

來源

2017-02-03 02:13:35

而不是創建從一開始元素，使用你已經通過克隆元素的第一組有。詳細信息在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>

來源

2017-02-03 03:19:39 zer00ne

按鈕單擊的新輸入

回答

相關問題