Javascript удалить файл на кнопку неограниченной загрузки

Question

Спасибо за помощь, я работаю над загрузчиком и пытаюсь добавить ссылку на удаление javascript в каждое дополнительное поле ввода. У меня есть тот, который добавляет ребенка.

Вот кодекс: 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>