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>