Javascript DOM - Formularelement neu erstellt appendChild hinzufügen?

Question

Ich habe zwei Funktionen hinzuzufügen und Tabellenzeilen zu entfernen, die ein Formulareingabeelement enthalten. Beide arbeiten gut, aber ich habe ein Problem, dass ich brauche nur eine Schaltfläche Entfernen Eingang zeigt auf später erstellten Tabellenzeilen. Meine beiden Funktion sind wie wie folgt:

function addRow(table_id){
var clone;
var rows=document.getElementById(table_id).getElementsByTagName('tr');
var index=rows.length;
var tbo=document.getElementById(table_id).getElementsByTagName('tbody')[0];
clone=rows[index-1].cloneNode(true);
tbo.appendChild(clone);
}

function delRow(table_id,button){
var row = button.parentNode.parentNode;
var tbo = document.getElementById(table_id).getElementsByTagName('tbody')[0];   
tbo.removeChild(row);
}

und der HTML-Inhalt ist:

<form>
<table id="mytab">
<tr>
<td>Upload File <input type="file" name="uploadfile[]" onchange="addRow('mytab')" /> <input name="del_row" type="button" value="Remove Row" onclick="delRow('mytab',this)"/></td>
</tr>
</table>
</form>

ich nicht bin: ein Javascript-Experte - mehr von einem Neuling -. So bin ich kämpfe mit einer Lösung zu kommen

Answer 1

Ich gehe davon aus, dass Sie auf die Schaltfläche Entfernen in der ersten Reihe zu vermeiden versuchen, zu haben, aber sie brauchen es jetzt, weil Sie denken, dass es in der nachfolgenden Zeilen zu erhalten, müssen Sie es in der Reihe haben, dass Sie das Klonen werden . Wenn stattdessen nur Sie neue HTML einfügen sowohl für den Upload und Tasteneingaben im addRow Methode löschen können Sie den Klon vollständig vermeiden und es wird keine Rolle, was Ihre ursprüngliche Zeile enthält.

function addRow(table_id){
   var table = document.getElementById(table_id);
   var row = table.insertRow(table.rows.length);
   var cell = row.insertCell(0);
   var template = table.rows[0].cells[0].innerHTML;
   cell.innerHTML = template + '<input type="button" value="Remove Row"'
                 + ' onclick="delRow(\'' + table_id + '\',this);" />'
}

Dies verwendet immer noch die erste Zeile als Vorlage, aber Sie können auf die Schaltfläche von ihm entfernen, da es durch Anhänge zu dem vorhandenen Text hinzugefügt wird.

Answer 2

Wenn Sie dieses Element erstellen

<input name="del_row" type="button" value="Remove Row" onclick="delRow('mytab',this)"/>

jedes Mal die addRow Funktion aufgerufen wird, können Sie einfach das tun innerhalb addRow ();

var input = document.createElement("input");
input.setAttribute("name", "del_row");
input.setAttribute("type", "button");
input.setAttribute("value", "Remove Row");
input.onclick = function() {
    delRow("+table_id+", this);
};