Neue Eingabe auf Knopf klicken

wirklich keine Frage, aber kann mir jemand sagen, was ist los mit diesem Code?Neue Eingabe auf Knopf klicken

Ich versuche, dynamisch auf Knopfdruck, neue Eingabefelder mit einer neuen Taste auf der Seite zu erstellen.

Ich möchte, dass die neuen Eingabefelder und Schaltflächen eindeutige IDs haben, damit ich sie löschen kann.

Bonus Frage: Wie würde ich zum Löschen einer bestimmten Eingabefeld und Schaltfläche gehen?

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>

Quelle

2017-02-03 X3minater

Zusätzlich können Sie auch das erstellte Element löschen:

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

Quelle

2017-02-03 01:55:16

Es ist ein Fehler im Code:

Uncaught ReferenceError: dynamicInput is not defined

Sie müssen dynamicInput zuerst definieren.

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

Um einen Eingang, fügen Sie einfach einen Abschnitt mit einem Event-Handler mit $(this).remove() zu löschen. Sie benötigen dazu jQuery. Das obige Snippet enthält bereits Folgendes.

Quelle

2017-02-03 01:50:08

Sie brauchen nicht einen Zähler und Ide überhaupt, wenn das Hinzufügen/Entfernen ist alles, was Sie wollen. Sie können relevante Eingaben erhalten, indem Sie this an die Methoden übergeben.

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

Quelle

2017-02-03 02:13:35

Statt Elemente von Anfang an erstellen, verwenden Sie, was Sie bereits durch Klonen der ersten Gruppe von Elementen haben. Details werden in Snippet kommentiert.

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>

Quelle

2017-02-03 03:19:39 zer00ne

Neue Eingabe auf Knopf klicken

Antwort

Verwandte Themen