Как удалить динамически созданный элемент jquery?

Question

[Иван Петровский]

Делаю форму с динамически добавляющимися полями, добавление работает корректно, но при удалении происходят проблемы удаляется только первый файл который уже был на странице.
Ниже прикладываю исходный код

<span id="add" class="addField">
                                    <i class="icon"></i>Добавить
                                </span>
                                <div class="inputs">
                                    <div>
                                        <input type="file" name="dynamic[]" class="field" > 
                                        <span id="remove">Удалить</span>
                                    </div>
                                </div>

$(document).ready(function () {
                            $('#add').click(function () {
                                $('<div><input type="file" class="field" name="dynamic[]" /><span id="remove">Удалить</span></div> ').fadeIn('slow').appendTo('.inputs');                                
                            });
                            $('#remove').click(function () {                               
                                    $(this).parent().remove();
                                    $("#remove").remove();      
                            });
                        });

Answer 1

[Иван Беленков]

Во-первых, если вы создаёте множество динамических элементов, не используйте в них id и не ссылайтесь на них по id. Селектор по id выбирает только первый элемент из списка, потому что такой элемент должен быть один.
Во-вторых, метод .click() не работает с динамически добавленными элементами. Поэтому событие вешается только на тот элемент, который уже был на странице. Навешивайте обработчик события методом .on() на элемент html. Это проделегирует обработчик на все элементы, указанные в качестве контекста, включая те, что были созданы динамически.
Суммируем:

<span class="addField add">
    <i class="icon"></i>Добавить
</span>
<div class="inputs">
    <div>
        <input type="file" name="dynamic[]" class="field" > 
        <span class="remove">Удалить</span>
    </div>
</div>

$(document).ready(function () {
    $('html').on('click','.add',function () {
        $('<div><input type="file" class="field" name="dynamic[]" /><span class="remove">Удалить</span></div> ').fadeIn('slow').appendTo('.inputs');                                
    });
    $('html').on('click','.remove', function () {                               
        $(this).parent().remove();    
    });
});

Answer 2

[Евгений Попов]

Подсказка:
id - должен быть исключительно один уникальный на страницу.

Answer 3

[Иван Петровский]

renotes.ru/post-37/jquery-dinomicheskoe-dobavlenie нашёл решение