jQuery的追加（）和remove（）元 [英] jQuery append() and remove() element

问题描述

我有一个表格，我动态地添加上传文件的附加功能的能力，但我也希望能够删除未使用的字段。下面是HTML标记

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>

如果他们点击添加眼下GIF的新行中加入这个jQuery

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;
});

要删除输入框中我试图添加类remove_project_file，然后添加此功能。

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.

任你JQuery的奇才，这将是伟大的任何想法

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

推荐答案

由于这是一个开放式的问题，我只会给你的我怎么会去实现这样的东西我自己的想法。

Since this is an open-ended question, I will just give you an idea of how I would go about implementing something like this myself.

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

结束语李里面的文件输入元素使点击时轻松地删除我们的删除链接的父。 jQuery的这么做是接近你所拥有的已经：

Wrapping the file inputs inside li elements allows to easily remove the parent of our 'remove' links when clicked. The jQuery to do so is close to what you have already:

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

这篇关于jQuery的追加（）和remove（）元的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！