jQuery append() 和 remove() 元素 [英] jQuery append() and remove() element

问题描述

我有一个表单，我在其中动态添加了使用 append 函数上传文件的功能，但我也希望能够删除未使用的字段.这是 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;
});

我认为应该有更简单的方法来做到这一点.也许我需要使用 $(this) 函数进行删除.另一种可能的解决方案是扩展添加项目文件"以添加和删除字段.

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>

将文件输入包装在 li 元素中可以在单击时轻松删除删除"链接的父级.这样做的 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 append() 和 remove() 元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！