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

Posted 2023-05-09

【中文标题】在 JavaScript 中从数组中删除一个项目

【英文标题】：Delete an item from an array in JavaScript

【发布时间】：2021-10-22 19:04:23

【问题描述】：

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

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

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

我尝试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;
  

【参考方案1】：

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

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

【讨论】：

file_temp = file_temp.filter((_,idx) => idx !== index) $(#file_note_$index).remove(); (temp.filter( function(el) return el != undefined; )); 我尝试在 deleteFile 中的当前代码上方添加这一行，但仍然得到相同的输出。

【参考方案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
        
      ));

【讨论】：

file_temp = file_temp.filter((_,idx) => idx !== index) $(#file_note_$index).remove(); (temp.filter( function(el) return el != undefined; )); 我按照建议做了，但我仍然在数组事件中看到该文件，尽管它已在屏幕上删除。