要素を追加し、Javascriptで追加された特定の要素を削除します

Question

divにファイルアップロードオプションを追加し、最後に追加された要素を削除する次のコードがあります。

<script language="javascript" type="text/javascript"> 
    function add(type) { 
     var element = document.createElement("input"); 
     element.setAttribute("type", type); 
     element.setAttribute("value", type); 
     element.setAttribute("name", type); 
     element.setAttribute("style", "width: 500px;"); 
     var newfile = document.getElementById("uploadhere"); 
     newfile.appendChild(element);   
    } 
    function remove() { 
     var newfile = document.getElementById("uploadhere"); 
     newfile.removeChild(newfile.lastChild); 
    } 

</script> 

インデックスを使用しておそらく最後の要素を削除するのではなく、特定の要素を削除する方法を見つけようとしています。または、作成された要素の横にある削除ボタンをクリックするだけです。これは私が

<script language="javascript" type="text/javascript"> 
     var i = 0; 
     function add(type) {    
      var element = document.createElement("input"); 
      element.setAttribute("type", type); 
      element.setAttribute("value", type); 
      element.setAttribute("name", type); 
      element.setAttribute("style", "width: 500px;"); 
      element.setAttribute("id", "element-" + i); 
      var removebutton = document.createElement("input"); 
      removebutton.type = "button"; 
      removebutton.value = "Remove"; 
      removebutton.setAttribute("id", "remove-" + i); 
      removebutton.setAttribute("onclick", "remove(" + i + ")"); 
      var newfile = document.getElementById("uploadhere"); 
      newfile.appendChild(element); 
      newfile.appendChild(removebutton); 
      i++;      
     } 
     function remove(id) {    
      document.getElementById("uploadhere").removeChild(document.getElementById("element-" + id));    
      document.getElementById("uploadhere").removeChild(document.getElementById("remove-" + id)); 
     } 

    </script> 

Answer 1

問題を解決する方法である私の解決策

を追加するために編集した

はこのお試しください：あなたが言ったように、

<script language="javascript" type="text/javascript"> 
    var i = 1; 
    function add(type) { 
     var element = document.createElement("input"); 
     element.setAttribute("type", type); 
     element.setAttribute("value", type); 
     element.setAttribute("name", type); 
     element.setAttribute("style", "width: 500px;"); 
     element.setAttribute("id", "element-" + i++); 
     var newfile = document.getElementById("uploadhere"); 
     newfile.appendChild(element);   
    } 
    function remove(id) { 
     document.getElementById("uploadhere").removeChild(document.getElementById("element-" + i)); 
    } 

</script> 

Answer 2

一つのオプションを、インデックスを使用することです。

function remove(index) 
{ 
    var newfile = document.getElementById("uploadhere"); 
    newFile.removeChild(newfile.childNodes[index]) 
} 

newfile.removeChildあなたの「追加」機能の行

もう1つのオプションは、あなたが言ったように、使いやすいという観点からは、ボタンを使うことです。私の好みはテーブルにすべてを置いてそれをもっときれいにすることです：

<table> 
    <tbody id="uploadhere"> 
    </tbody> 
</table> 

<script> 
    var newfile = document.getElementById("uploadhere"); 

    function add(type) { 
    var element = document.createElement("input"); 
    element.setAttribute("type", type); 
    element.setAttribute("value", type); 
    element.setAttribute("name", type); 
    element.setAttribute("style", "width: 500px;"); 

    // Create your button 
    var button = document.createElement("button"); 
    button.onclick = "newfile.removeChild(this.parentNode.parentNode)"; 
    var text = document.createTextNode("Remove"); 
    button.appendChild(text); 

    // Create a table row in which to put the data 
    var row = newFile.insertRow(-1); 

    // Create a table cell in which to put your "input" element 
    var cell1 = row.insertCell(-1); 
    cell1.appendChild(element); 

    // Create a table cell in which to put your button 
    var cell2 = row.insertCell(-1); 
    cell2.appendChild(button); 
    } 
</script>