insertar - jQuery append() y elemento remove()

jquery+"appendto"

Question

Tengo un formulario en el que agrego dinámicamente la capacidad de cargar archivos con la función de agregar, pero también me gustaría poder eliminar los campos no utilizados. Aquí está el marcado 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>

En este momento si hacen clic en el gif "agregar" se agrega una nueva fila con este 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;
});

Para eliminar el cuadro de entrada, intenté agregar la clase "remove_project_file" y luego agregué esta función.

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

Creo que debería haber una manera mucho más fácil de hacer esto. Quizás necesito usar la función $ (this) para eliminar. Otra posible solución sería expandir el "agregar archivo de proyecto" para agregar y eliminar campos.

Cualquiera de ustedes, los asistentes de JQuery, tienen alguna idea que sería genial

Answer 1

Dado que esta es una pregunta abierta, les daré una idea de cómo implementaré algo como esto yo mismo.

<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>

Envolver las entradas de archivo dentro de los elementos li permite eliminar fácilmente el elemento primario de nuestros enlaces ''eliminar'' cuando se hace clic. El jQuery para hacerlo está cerca de lo que ya tienes:

// 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

Puede llamar a una función de restablecimiento antes de agregar. Algo como esto:

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