在 JavaScript 中从数组中删除一个项目

Question

我正在创建功能，用户可以在其中上传任意数量的文件。我还为用户提供删除功能，以防他们可能需要上传错误的文件。他们可以在提交表单之前将其删除。

但我在删除文件时遇到问题。用户上传文件，然后他们想删除它，文件从他们的屏幕上删除，然后他们尝试上传新文件。当他们上传新文件时，用户之前删除的文件也会被上传。我一直在尝试解决这个问题，但我还没有找到任何解决方案。

我想要实现的是当用户删除他们的文件时，文件应该被完全删除并且当他们尝试上传新文件时。只应上传新文件。

我尝试console.log(delete file_temp[index]); 这一行，当我控制台记录它时它显示true。

上传了我的房子文件

添加新文件，然后我想删除我的房子文件

删除了我的房子文件

上传新文件，这是我梦寐以求的汽车，然后我以前的房子文件出现在列表中

列表应该是dream house 和my dream car

let file_temp = [];
let note = [];


$(".upload_file").click(function() {
  $("#upload").click();
});
$("#upload").change(function() {
  let fileData = $(this).prop("files")[0];
  if (fileData.type == 'image/jpg') {
    let index;
    let file_note = $('#fileNote').val();
    let file = $('#upload').val();

    index = file_temp.push({
      "file": fileData
    }) - 1;
    index = note.push({
      "note": file_note
    }) - 1;

    var filename = file.substr(file.lastIndexOf('\\') + 1, file.length);
    fileInfo += `<div class="tab-content col-12 mt-4" id="myTabContent-2">
      <div class="tab-pane fade show active" id="addCustodian" role="tabpanel" aria-labelledby="addCustodian-tab">
        <div class="col-md-12" id="file_note_${index}" data-ind="${index}">         
          <ul class="perfomer-lists m-0 p-0" id="">
            <li class="d-flex mb-4 align-items-center">
              <div class="mr-2">
                <span class='close' onclick='deleteFile(${index}, "doc")'>&times;</span>
              </div>
              <div class="ml-3">
                <p class="mb-0 font-size-12"> ${filename}</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>`;

    document.getElementById("info").innerHTML = fileInfo;

  }
});


// And this my delete function

const deleteFile = (index, process) => {
  switch (process) {
    case "doc":
      delete file_temp[index];
      $(`#file_note_${index}`).remove();
      (temp.filter(
        function(el) {
          return el != null;
        }
      ));
      console.log(delete file_temp[index]);
      break;
  }
}

Answer 1

在 javascript 中从数组中删除项目的一个好方法是使用 filter 函数。

const deleteFile = (index, process) => {
  switch (process) {
    case "doc":
      file_temp = file_temp.filter((_,idx) => idx !== index)
      // your logic...
      break
  }
}

Answer 2

simply use array.filter to remove the file, as someone else has also suggested above,

Additionally, delete just clears the value at the specified index, but array length remains same, so not advisable. 

also, change below condition to 
temp.filter(
        function(el) {
          return el != null;
        }
      ));

temp.filter(
        function(el) {
          return el != undefined; //not undefined instead of null
        }
      ));