javascript中的remove按钮和readURL

我有多个由javascript生成的输入文件。当我单击按钮添加输入文件时，它将创建一个新的输入文件

这是一个脚本：

<input type="file" class="address" id="address0"/>
<button type="button" class="addmore">Add More Picture</button>

var rowNum = 0;

$("body").on("click", ".addmore", function() {
    rowNum++;
    var $address = $('.address').last();
    var nextHtml = $address.clone();
    nextHtml.attr('id', 'address' + rowNum);
    var hasRmBtn = $('.rmbtn', nextHtml).length > 0;
      if (!hasRmBtn) 
        {
          var rm = "<button type='button' class='rmbtn'>Remove</button>"
          $('.removebtn', nextHtml).append(rm);
        }
    $address.after(nextHtml); 
});

$("body").on("click", ".rmbtn", function() {
    $(this).parents('.addresses').remove();
});

但是，它只显示第一个图像

这是整把小提琴

---

请提前帮助和感谢

如果我正确理解了您正在做的事情，那么添加“删除”按钮的代码需要有点不同。比如：

  var $address = $('.address').last();
  var nextHtml = $address.clone();
  nextHtml.attr('id', 'address' + rowNum);
  $address.after(nextHtml); 
  if (nextHtml.find('.rmbtn').length == 0) {
      $("<button type='button' class='rmbtn'>Remove</button>").insertAfter(nextHtml);
  }

var$address=$（'.address'）.last（）；
var nextHtml=$address.clone（）；
nextHtml.attr（'id'，'address'+rowNum）；
$address.after（nextHtml）；
if（nextHtml.find（'.rmbtn'）。长度==0）{
$（“删除”）。之后插入（下一个TML）；
}

由于您的小提琴中的$address是一个输入，我不明白它怎么会有一个类为“rmbtn”的孩子，但我在假设生产中的$address可能更复杂的情况下，将该测试留在了测试中

过程是：将nextHtml添加到DOM后（在$address之后），检查它是否有一个remove按钮。如果没有，请创建“删除”按钮并在下一个TML之后插入它。如果$address不是一个输入，您可以附加到它

---

看，这是你的变体。

嗨，波比，谢谢。但是“删除”按钮不会删除图像。

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#address0").change(function(){
    readURL(this);
});

  var $address = $('.address').last();
  var nextHtml = $address.clone();
  nextHtml.attr('id', 'address' + rowNum);
  $address.after(nextHtml); 
  if (nextHtml.find('.rmbtn').length == 0) {
      $("<button type='button' class='rmbtn'>Remove</button>").insertAfter(nextHtml);
  }