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

Question

我有Add Attachment链接，如果点击它将创建一个文件输入和删除链接。例如我添加了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分享您的代码演示。

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

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

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

$('.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

方法2：遍历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();
});