Jquery Append() and remove() element

Question

Hi,
I have a form where I'm dynamically adding the ability to upload files with the append function but I would also like to be able to remove unused fields. Here is the html markup

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

Right now if they click on the "add" gif a new row is added with this 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;  });

To remove the input box i've tried to add the class "remove_project_file" then add this function.

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

I think there should be a much easier way to do this. Maybe i need to use the $(this) function for the remove. Another possible solution would be to expand the "add project file" to do both adding and removing fields.

Any of you JQuery wizards have any ideas that would be great

Answer 1

Since this is a rather open-ended question, I will simply give you a rough idea as to how I would go about implementing something like this.

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

Wrapping the file inputs inside li elements allows to easily remove the parent of our "remove" links when necessary.

$('.add_project_file').click(function() {
    $(".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>');

    return false;
});

// using live() will bind the event to all future
// elements as well as the existing ones
$('.remove_project_file').live('click', function() {
    $(this).parent().remove();

    return false;
});

Answer 2

Alex your the man, been working at this same issue for a bit. So many wrong or stupid answers i saw to this same question.

Answer 3

Thanks a lot...It was very helpful.Though i am yet to fully understand the jquery live event. Thanks

Answer 4

thank you! i find my answer.

Answer 5

Thanks , live function solved my problem .