html - 如何删除附加和克隆的元素 onclick

Question

我想从文档中删除附加元素及其相应的输入文件。

我正在创建一个文件上传系统，用户可以在其中选择图像并在上传前预览它们。我有一个取消按钮，他们可以使用它来删除他们不想上传的图像，到目前为止图像正在预览，但取消按钮不起作用。

这是我的代码

$(function() {
  var newInput;
  $(":file").change(function() {
    if (this.files && this.files[0]) {
      for (var i = 0; i < this.files.length; i++) {
        var reader = new FileReader();
        reader.onload = imageIsLoaded;
        reader.readAsDataURL(this.files[i]);
      }
      //CLONE THE INPUT FIELD FOR UPLOADING 
      newInput = $(this).clone();
      newInput = newInput.addClass(this.value);
      newInput.appendTo(".thumbimg");
    }
  });
});

//PREVIEW IMAGE
function imageIsLoaded(e) {
  $('.appendImg').append('<img class="myImg" src=' + e.target.result + '><i class="fa fa-circle"></i>');
};

//REMOVE IMAGE AND CLONED INPUT
$(".fa-circle").on('click', function() {
  $(this).remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<input type="file" name="file[]" class="addimage" id="addimage" accept="image/*" multiple>
<form enctype="multipart/form-data" method="POST">
  <div class="thumbimg">
    <input type="submit" class="submit">
  </div>
</form>
<div class="appendImg"></div>

标签： htmljquery