Dexie.js delete one item with id not working

Question

Hi this my simple project js code example

 const deleteOneNote = (id) => {
    const db = openNoteDb();
    db.notes.where('id').equals(id).delete();
  }

  $(document).on("click", ".remove_note", function () {
    
    const id = $(this).parent().parent().attr("id");
    const db = openNoteDb();
    db.notes.where('id').above(-1).modify(result => {
      if (result.id == id) {
        deleteOneNote(result.id);
        window.location.reload(true)
      }
    })
  })

But my delete function not working I am dont understand Please help me..

Answer 1

First of all, your function deleteOneNote() must return the promise from db.transaction() so you can wait for the delete to complete. Alternatively make the function async and await the promise returned by db.transaction(). Whatever you choose, the caller of your function must also await your function before testing if the delete was successful or not.

Then, I also see a common problem on the code, which is that the Dexie instance is created on-demand, which would lead to memory leak unless you close it when done. Instead, declare db on top-level so it will live throwout your entire application life time and let you functions use that same db instance everywhere.

A third common mistake (which might not be this cause though) is that people supply a string when the key was stored as a number, or vice versa. Make sure that the id supplied to your function is off the same type as in the object you want to delete.

// Declare one single Dexie instance in your entire application
// and use it from all functions.
const db = new Dexie("NotesDB");
// If you use modules, keep this code in a module and
// add an 'export' before 'const db = new Dexie("NotesDB");

db.version(1).stores({
  notes: `
  id,
  time,
  note,
  noteBackColor,
  noteTextColor,
  projectType,
  alarm`,
});

// Let you functions use the singleton Dexie instance:
const deleteOneNote = (id) => {
  return db.transaction('rw', db.notes, function () {
    // Note: Doing this in a transaction is over-kill, but ok.
    return db.notes.delete(id);
  }).catch((err) => {
    console.log(err);
    throw err; // Also, you probably want to rethrow the error...
  });
}

Now, these are code recommendations from Dexie's best-practices section and not nescessarily reason for why your code fails to delete an item.

A more interesting thing is:

1. What's the value of the "id" property in your database of the object that you want to delete? I assume your object looks something like{id: "x", time: "y", ...}.

2. What argument do you pass to your function? If the object you are deleting looks like described in previous bullet, the value of the id argument must be exactly the string "x" - not the object and not an array or any other type - a string with the exact value "x".

A working test for this code would be:

const foo = {id: "x", time: "y"};
db.notes.put(foo).then(async () => {
  if (await db.notes.get("x")) {
    console.log("My object is there!");
  } else {
    console.log("My object is not there!");
  }
  console.log("Now deleting it...");
  await deleteOneNote("x");
  if (await db.notes.get("x")) {
    console.log("My object is there!");
  } else {
    console.log("My object is not there!");
  }
}).catch(console.error);

The result from running this test should be:

My object is there!
Now deleting it...
My object is not there!