JQuery append() et remove() élément

Question

J'ai un formulaire où j'ajoute dynamiquement la possibilité de télécharger des fichiers avec la fonction append mais j'aimerais aussi pouvoir supprimer les champs inutilisés. Voici le balisage html

Images du projet:

En ce moment, s'ils cliquent sur l'image "ajouter", une nouvelle ligne est ajoutée avec ce jquery

$('a.add_project_file').click(function() {
    $(".project_images").append(' ');
    return false;
});

Pour supprimer le champ de saisie, j'ai essayé d'ajouter la classe "remove_project_file" puis d'ajouter cette fonction.

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

Je pense qu'il devrait y avoir une manière beaucoup plus facile de le faire. Peut-être que j'ai besoin d'utiliser la fonction $(this) pour la suppression. Une autre solution possible serait d'étendre le "ajouter un fichier de projet" pour ajouter et supprimer des champs.

Est-ce que certains d'entre vous, les magiciens de JQuery, ont des idées, ce serait génial

Answer 1

Étant donné que cette question est ouverte, je vais simplement vous donner une idée de la façon dont je procéderais pour mettre en œuvre quelque chose comme cela moi-même.

    Images du projet:

Envelopper les entrées de fichier à l'intérieur des éléments li permet de facilement supprimer le parent de nos liens 'supprimer' lorsqu'ils sont cliqués. Le jQuery pour le faire est proche de ce que vous avez déjà:

// Ajouter un nouvel input avec le lien 'supprimer' associé lorsque le bouton 'ajouter' est cliqué.
$('.add_project_file').click(function(e) {
    e.preventDefault();

    $(".project_images").append(
        ''
      + ' '
      + ''
      + '');
});

// Supprimer le parent du lien 'supprimer' lorsque le lien est cliqué.
$('.project_images').on('click', '.remove_project_file', function(e) {
    e.preventDefault();

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

Answer 2

Vous pouvez appeler une fonction de réinitialisation avant d'ajouter. Quelque chose comme ceci:

    function resetNewReviewBoardForm() {
    $("#Description").val('');
    $("#PersonName").text('');
    $("#members").empty(); //celui-ci a fonctionné dans mon cas
    $("#EmailNotification").val('False');
}