jQuery append() 和 remove() 元素

Question

我有一个表单，在其中使用append函数动态添加上传文件的功能，但我也想能够删除未使用的字段。以下是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>

目前，如果他们点击"add" gif，将通过这个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”，然后添加此函数。

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

我认为应该有更简单的方法来做这件事。也许我需要使用$(this)函数来进行移除操作。另一个可能的解决方案是扩展"添加项目文件"功能，既可以添加也可以删除字段。

你们中的任何JQuery巫师有任何好的想法都将是很棒的。

- Brooke.

---

你使用project_images作为一个类而不是一个ID，有什么原因吗？ - Corey Sunwold

不太是，我倾向于对那些可能在页面上出现多次的元素使用类(class)，而对只会被使用一次的元素使用ID。在这种情况下，我使用类而不是ID没有真正的理由。 - Brooke.

Answer 1

由于这是一个开放性的问题，我将只给您一个关于如何自己实现类似功能的想法。

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

将文件输入框包含在 li 元素中可以轻松地在点击“删除”链接时删除其父元素。要实现这个功能，使用的jQuery代码与您已经有的代码非常接近：

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

- Alex Barrett

---

谢谢，谢谢，谢谢！我以前没有听说过 "live"，但我知道它有多方便。此外，使用<li>来列出文件清单有什么优势？这是为了我们能够删除我们想要的一个文件上传吗？ - Brooke.

是的，这样我们就可以轻松地单独删除每个输入。这也是您内容更语义化的表示方式（文件列表）。如果您愿意，您也可以将它们包装在“span”或“div”标签中。 - Alex Barrett

哦，live只是jQuery最新版本（v1.3+）中的一个功能，你没听说过也不奇怪。 - Alex Barrett

.live已被弃用，应使用.on()代替。 - Lukasz

Answer 2

您可以在添加之前调用重置函数，就像这样：

Something like this:

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

- boateng