CODEWITHSUNDEEP
javascriptjqueryarrays
teefal
teefal

Reputation: 7

Delete an item from an array in JavaScript

I'm creating function where user can upload files as many as they want. I also provide delete function to user in case they might need upload a wrong file. They can delete it before submitting the form.

But I have problem with deleting file. User upload the file, then they want to delete it, the file gets removed from their screen then they try to upload a new file. When they upload the new file, the previous file that has been deleted by the user also gets uploaded. I've been trying to fix this but I haven't meet any solution yet.

What I want to achieve is when user delete their file , the file should get removed completely and when they tried to upload a new file. Only the new file should be uploaded.

I tried to console.log(delete file_temp[index]); this line and it show true when I console.log it.

uploaded my house file

add new file, then I want to delete the my house file

deleted the my house file

upload new file which is my dream car then the then the previous my house file got showed up in the list

The list supposed to be dream house and 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;
  }
}

Upvotes: 0

Views: 1184

Answers (2)

Gaurav Mithas
Gaurav Mithas

Reputation: 75

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
        }
      ));

Upvotes: 0

jmpargana
jmpargana

Reputation: 151

A good way to delete an item from an array in javascript is to use the filter function.

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

Upvotes: 1

Related Questions