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

У меня есть форма, где я динамически добавляю возможность загрузки файлов с помощью функции append, но я также хотел бы удалить неиспользуемые поля. Вот разметка 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 есть идеи, которые были бы великолепны

Ответы

Ответ 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();
});

Ответ 2

Вы можете вызвать функцию reset перед добавлением. Что-то вроде этого:

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