45

我有一个表单，我正在动态添加使用附加功能上传文件的能力，但我也希望能够删除未使用的字段。这是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>

现在，如果他们单击“添加”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 向导都有任何很棒的想法

4

2 回答 2

54

由于这是一个开放式问题，我只会告诉你我将如何自己实现这样的事情。

<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();
});
于 2009-09-30T23:36:57.847 回答
9

您可以在追加之前调用重置函数。像这样的东西：

    function resetNewReviewBoardForm() {
    $("#Description").val('');
    $("#PersonName").text('');
    $("#members").empty(); //this one what worked in my case
    $("#EmailNotification").val('False');
}
于 2016-05-11T16:12:57.963 回答