Элемент jQuery append () и remove ()

Question

У меня есть форма, в которой я динамически добавляю возможность загрузки файлов с помощью функции добавления, но я также хотел бы иметь возможность удалять неиспользуемые поля. Вот HTML-разметка

<span class="inputname">Project Images:
    <a href="#" class="add_project_file"><img src="images/add_small.gif" border="0"></a>
</span>
<span class="project_images">
    <input name="upload_project_images[]" type="file" /><br/>
</span>

Прямо сейчас, если они нажимают на «добавить» gif, новая строка добавляется с этим jquery

$('a.add_project_file').click(function() {
    $(".project_images").append('<input name="upload_project_images[]" type="file" class="new_project_image" /> <a href="#" class="remove_project_file" border="2"><img src="images/delete.gif"></a><br/>');
    return false;
});

Чтобы удалить поле ввода, я попытался добавить класс «remove_project_file», а затем добавить эту функцию.

$('a.remove_project_file').click(function() {
    $('.project_images').remove();
    return false;
});

Я думаю, что должен быть намного более простой способ сделать это. Возможно, мне нужно использовать функцию $ (this) для удаления. Другим возможным решением было бы расширить «добавить файл проекта» для добавления и удаления полей.

У любого из вас есть мастера JQuery, у которых есть идеи, которые были бы великолепны

Answer 1

Поскольку это открытый вопрос, я просто дам вам представление о том, как бы я сам реализовал нечто подобное.

<span class="inputname">
    Project Images:
    <a href="#" class="add_project_file">
        <img src="images/add_small.gif" border="0" />
    </a>
</span>

<ul class="project_images">
    <li><input name="upload_project_images[]" type="file" /></li>
</ul>

Обтекание входных файлов внутри li элементов позволяет легко удалить родительский элемент наших ссылок «удалить» при нажатии. JQuery для этого близок к тому, что у вас уже есть:

// Add new input with associated 'remove' link when 'add' button is clicked.
$('.add_project_file').click(function(e) {
    e.preventDefault();

    $(".project_images").append(
        '<li>'
      + '<input name="upload_project_images[]" type="file" class="new_project_image" /> '
      + '<a href="#" class="remove_project_file" border="2"><img src="images/delete.gif" /></a>'
      + '</li>');
});

// Remove parent of 'remove' link when link is clicked.
$('.project_images').on('click', '.remove_project_file', function(e) {
    e.preventDefault();

    $(this).parent().remove();
});

Answer 2

Вы можете вызвать функцию сброса перед добавлением. Примерно так:

    function resetNewReviewBoardForm() {
    $("#Description").val('');
    $("#PersonName").text('');
    $("#members").empty(); //this one what worked in my case
    $("#EmailNotification").val('False');
}