删除由 JQuery 创建的相应文件输入

Question

我有添加附件链接，如果单击该链接将创建一个文件输入和删除链接。例如我添加了 3 个文件输入，如果用户单击文件输入 2 的删除链接，它将删除文件输入 2 而不是最后一个文件输入，因此它只会删除相应的文件输入。

如何为这种情况编写 jquery 代码？还如何安排文件输入以便垂直添加？ 我将 Jasny Bootstrap 用于<input type="file"/>

查看：

<div class="form-group">
    <label class="control-label col-md-2">Attachment</label>
    <div class="col-md-10">
        <div id="attachments">
        </div>
    </div>
</div>
<div class="form-group">
    <div class="col-md-2"></div>
    <div class="col-md-10"><a href="#" id="addAttachment">Add More</a></div>
</div>

脚本：

$(document).ready(function () {
            $("#addAttachment").click(function () {
                $("#attachments").append("<div class='fileinput fileinput-new' data-provides='fileinput'><span class='btn btn-default btn-file'><span class='fileinput-new'>Select file</span><span class='fileinput-exists'>Change</span><input type='file' name='myFile'></span><span class='fileinput-filename'></span><a href='#' class='close fileinput-exists' data-dismiss='fileinput' style='float: none'>&times;</a></div>")
            });
        });

Answer 1

在发布 StackOverflow 问题时，您应该始终与 http://jsbin.com 分享您的代码演示。

我不知道您如何创建元素以及如何初始化它们。但这里有几个例子。

方法一：使用闭包记住每个按钮属于哪个元素

您在 addmore 按钮上的单击事件期间创建一个新元素。此时，您已经创建了一个元素，您可以将它的删除按钮绑定到元素本身：

$('.addmore').click( function(event) {
  event.preventDefault();

  var randomString = (Math.random() + 1).toString(36).substring(7);

  var $newElement = $("<div class='element'>" +
    "  <span class='element-content'>" +
    "     Element content " + randomString +
    "  </span>" +
    "  <a href='#!' class='element-delete'>Delete</a>" +
    "</div>");

  $newElement.appendTo($('body'));

  var $removeButton = $newElement.find('.element-delete');

  $removeButton.click( function(event) {
    event.preventDefault();
    $newElement.remove();
  });

});

演示：http://jsbin.com/damag/3/edit?html,js,output

方法二：遍历DOM查找点击的按钮属于哪个元素

您在代码的一个位置创建元素，并在代码的另一个位置对它们的删除做出反应。

当一个移除按钮被点击时，你不知道它对应的是哪个元素。好吧，我们必须弄清楚！

$('.element-delete').click( function(event) {
  event.preventDefault();

  var $clickedButton = $(event.target);
  var $element = $clickedButton.closest('.element');
  $element.remove();
});

演示：http://jsbin.com/damag/4/edit?html,js,output

此示例看起来更简单，但这是因为它不包含将示例应用于动态创建的元素的代码。您必须自己弄清楚（或使用更多详细信息和http://jsbin.com 演示更新您的问题，并对我的回答发表评论，以便我注意到您的更新）。

Answer 2

基本思路如下：

http://jsfiddle.net/xf7vJ/4/ 或者 http://jsfiddle.net/xf7vJ/5/

html

<button>duplicate</button>

<div class='clone'>
    <textarea></textarea>
    <a href="#" class='delete'>x</a>
</div>

jquery

// save into memory (just the first div.clone)
var theTextarea = $(".clone:eq(0)");

// clone the element (the true attr is important)
$("body").on('click', "button", function(){
 theTextarea.clone(true).appendTo("body");
});

// remove it
$(".delete").on('click',function(e){
    e.preventDefault();
 $(this).parent().remove();
});