Jquery Append() and remove() element

Posted by BandonRandon on Stack Overflow See other posts from Stack Overflow or by BandonRandon
Published on 2009-09-30T23:23:32Z Indexed on 2010/06/09 3:22 UTC
Read the original article Hit count: 260

Filed under:
|
|

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

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about remove