jquery - 删除由 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

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

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

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

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

$('.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查找点击的按钮属于哪个元素

您可以在代码的一个位置创建元素，并在代码的另一位置对其删除使用react。

当单击删除按钮时，您不知道它对应于哪个元素。好吧，我们必须弄清楚!

$('.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 演示更新您的问题，并对我的答案发表评论，以便我注意到您的更新)。