web-dev-qa-db-fra.com

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

J'ai un formulaire dans lequel j'ajoute dynamiquement la possibilité de télécharger des fichiers avec la fonction d'ajout, mais j'aimerais aussi pouvoir supprimer les champs non utilisés. Voici le balisage 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>

Pour le moment, s’ils cliquent sur le bouton "ajouter", une nouvelle ligne est ajoutée à cette requête.

$('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;
});

Pour supprimer la zone 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 un moyen beaucoup plus facile de faire cela. Peut-être que j'ai besoin d'utiliser la fonction $ (this) pour la suppression. Une autre solution possible consisterait à développer le "fichier projet" pour ajouter et supprimer des champs.

Tous les sorciers de JQuery ont des idées qui seraient formidables

jqueryappend
38
Brooke.

Puisqu'il s'agit d'une question ouverte, je vais simplement vous donner une idée de la façon dont je procéderais pour mettre en œuvre une telle chose moi-même.

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

Envelopper les entrées de fichier dans les éléments li permet de supprimer facilement le parent de nos liens "Supprimer" lorsque vous cliquez dessus. Le jQuery à faire est proche de ce que vous avez déjà:

// 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();
});
48
Alex Barrett

Vous pouvez appeler une fonction de réinitialisation avant d’ajouter. Quelque chose comme ça:

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