我删除了我上传的文件，但出现错误

Question

删除上传的文件时出现错误。即js:42 Uncaught TypeError: Cannot read property 'removeChild' of null。我必须为 IE 使用 removeChild 和 var。有什么好的方法可以修复错误吗？

html

        <form action="" enctype="multipart/form-data" class="page_form">
          <label class="ui_upload upload_label" for="upload-doc">

            <input type="file" name="file" id="upload-doc"
              accept=".pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
              multiple />
            <span class="btn sm label upload_btn">upload file</span>
          </label>
          <div class="upload_documents_wrap visually_hide">
            <div class="upload_documents"> </div>
          </div>

          <div class="visually_hide" id="upload-file">
            <div class="upload_info shadow light upload_file">
              <span class="tit sm file_name"> </span>
              <span class="tit sm file_size"> </span>
              <button class="file_remove" type="button">Remove</button>
            </div>
          </div>

          <button type="submit" class="btn sm">submit</button>
        </form>

js

(function () {
  var formElement = document.querySelector(".page_form");
  var fileChooserEl = formElement.querySelector('.upload_label input[type="file"]');
  var uploadDocumentsWrap = formElement.querySelector(".upload_documents_wrap");
  var uploadDocuments = uploadDocumentsWrap.querySelector(".upload_documents");
  var templateItemParent = document.querySelector("#upload-file");
  var templateItem = templateItemParent.querySelector(".upload_file");
  var uploadFiles = [];
  var myFileList = [];

  var onFileChooserChange = function () {
    for (var i = 0; i < fileChooserEl.files.length; i++) {
      var position = templateItem.cloneNode(true);
      var uploadFileName = position.querySelector(".file_name");
      var uploadFileSize = position.querySelector(".file_size");
      var uploadFileRemove = position.querySelector(".file_remove");
      var fileName = fileChooserEl.files[i].name.toLowerCase();
      uploadDocumentsWrap.classList.remove("visually_hide");
      uploadFileName.textContent = fileName; // file size

      var suffix = "bytes";
      var size = fileChooserEl.files[i].size;

      if (size >= 1024 && size < 1024000) {
        suffix = "KB";
        size = Math.round(size / 1024 * 100) / 100;
      } else if (size >= 1024000) {
        suffix = "MB";
        size = Math.round(size / 1024000 * 100) / 100;
      }

      uploadFileSize.textContent = size + suffix;
      uploadFileRemove.addEventListener("click", function (evt) {
        evt.preventDefault();
        myFileList = myFileList.filter(function (item) {
          return item.name.toLowerCase() !== uploadFileRemove.previousElementSibling.textContent;
        });
        console.log(myFileList);
        var index = uploadFiles.indexOf(evt.target.parentNode);
        uploadFileRemove.parentNode.parentNode.removeChild(uploadFileRemove.parentNode);
        uploadFiles.splice(index, 1);
        myFileList.splice(index, 1);
        console.log(index);

        if (!uploadFiles.length) {
          uploadDocumentsWrap.classList.add("visually_hide");
        }
      });
      uploadDocuments.appendChild(position);
      uploadFiles.push(position);
      myFileList.push(fileChooserEl.files[i]);
    }

    fileChooserEl.value = "";
  };

  console.log(uploadFiles);

  var getFormData = function () {
    var data = new FormData(formElement);

    for (var i = 0; i < myFileList.length; i += 1) {
      data.append(fileChooserEl.name, myFileList[i]);
    }

    return data;
  };

  fileChooserEl.addEventListener("change", onFileChooserChange);
})();

Answer 1

错误在这一行：

uploadFileRemove.parentNode.parentNode.removeChild(uploadFileRemove.parentNode);

我调试了代码，发现每次单击“删除”按钮时，您都删除了错误的文件。使用 index 可以更容易、更清楚地识别要删除的文件。我这样编辑代码并且效果很好：

...
var index = uploadFiles.indexOf(evt.target.parentNode);
//edit
var removefile = document.querySelectorAll(".upload_info")[index];
uploadDocuments.removeChild(removefile);                      
//uploadFileRemove.parentNode.parentNode.removeChild(uploadFileRemove.parentNode);
uploadFiles.splice(index, 1);
myFileList.splice(index, 1);
console.log(index);
...

结果：

我删除了我上传的文件，但出现错误

I remove a file that I uploaded, I got a error

javascript

internet-explorer

google-chrome