ボタン入力の新規入力

本当にnoobの質問ですが、誰かが私にこのコードの何が間違っているか教えてもらえますか？ボタン入力の新規入力

私は、ボタンをクリックすると動的に、新しいボタンを側面に作成しようとしています。

後で削除できるように、新しい入力ボックスとボタンに異なる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

また、あなたはまた、作成した要素を削除することができます。メソッドに渡された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 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が必要です。上記のスニペットには、次の内容が既に含まれています。

<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:50:08

はあなたが削除/追加は、あなたが望むすべてであるすべての場合で、カウンタとIDを必要としない：

出典

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

答えて

関連する問題