javascript删除无限上传按钮上的文件

Question

感谢您的即将到来的援助，我正在上传和尝试添加JavaScript删除链接到每个额外的输入字段。我有一个增加了一个孩子。

这里是一个codepen：http://codepen.io/anon/pen/NPPmYP

我所想要做的是创造额外的输入域的过程中，这是我的代码，如果有人能够帮助。

我也尝试过这些方法和他们没有工作

<script language="javascript"> 
<!-- 
function _add_more() { 

    files.appendChild(document.createElement("br")); 

    var del = document.createTextNode("Delete "); 
    document.getElementById("files").appendChild(del); 

    var extra = document.createElement('input'); 
    extra.type="file"; 
    extra.id="images[]"; 
    extra.name="images[]"; 
    extra.size="50"; 
    extra.accept="image/jpeg"; 
    document.getElementById("files").appendChild(extra); 
} 
</script> 

我试图改变什么，我有这条线到

var del = document.createTextNode('<a href="javascript:_del_extra();">delete</a> '); 

，但它只是显示了它作为文本，而不是使之成为可点击链接，我真的不确定如何创建删除孩子而不影响其他人的功能。感谢您即将到来的支持

Answer 1

您需要附加一个事件处理程序到点击删除链接。

就是这样。 （更新为根据注释）

<script language="javascript"> 
function _add_more() { 

    var del = document.createElement("a"); 
    del.appendChild(document.createTextNode("Delete")); 
    del.href="#"; // Apply link styling 

    var extra = document.createElement('input'); 
    extra.type="file"; 
    extra.id="images[]"; 
    extra.name="images[]"; 
    extra.size="50"; 
    extra.accept="image/jpeg"; 

    var additionalFile = document.createElement('span'); 
    additionalFile.appendChild(document.createElement("br")); 
    additionalFile.appendChild(del); 
    additionalFile.appendChild(extra); 

    document.getElementById("files").appendChild(additionalFile); 

    del.addEventListener('click', function(event){ 
     additionalFile.parentElement.removeChild(additionalFile); 
     event.preventDefault(); 
    }); 
} 
</script>