0

I was making a simple todolist app and everything else works fine but my delete item code is only working in chrome and no other browser. I even tried it in latest firefox version but it just doesn't seem to work and I have no idea why.

Here's the code:

function removeTask(e) {
  if (e.target.classList.contains("del")) {
    //e.target.parentElement.remove();
    let item = e.target.parentElement.childNodes[0].textContent
      .replace(/[\n\r]+|[\s]{2,}/g, " ")
      .trim();

    console.log(item);

    let url = `/items/${item}`;
    http
      .delete(url)
      .then(reloader())
      .catch((err) => console.log(err));

    function reloader() {
      location.reload();
    }
  }
}

The above code looks fine but whenever I try deleting an item, it works in chrome but is not working in firefox (latest version) and edge. I haven't checked on other browsers.

(Update: Sometimes it deletes an item but when I try deleting another item, it does not work)

ohnope
  • 27
  • 8
  • 3
    "I even tried it in latest firefox version but it just doesn't seem to work and I have no idea why." What happens when you run this in Firefox? Do you get any errors in the console? If so, what are they? If not, what happens and what do you want it to do differently? – Code-Apprentice Jul 27 '20 at 16:12
  • well, work the same way as it is working in chrome.. i.e. deleting a list item. It's not deleting items in firefox or edge but it's doing it in chrome – ohnope Jul 27 '20 at 16:15
  • 2
    `.then(reloader())` is wrong – epascarello Jul 27 '20 at 16:16
  • @epascarello I see. But, it's working in chrome. anyway, what should I change it to? – ohnope Jul 27 '20 at 16:18
  • You are executing the function and setting what it returns to the then. It should be a reference. – epascarello Jul 27 '20 at 16:19
  • No, this is not a duplicate. Even the reference doesn't fix complete problem – ohnope Jul 27 '20 at 16:27

1 Answers1

1
    http
      .delete(url)
      .then(reloader())
      .catch((err) => console.log(err));

Here you call reloader() immediately and pass its return value to .then(). I think instead, you want to reload the page after the http.delete() request returns with a response. To do this, pass the function to .then instead of calling it first:

    http
      .delete(url)
      .then(reloader)
      .catch((err) => console.log(err));

Since reloader() just calls location.reload(), you can get rid of reloader() like this:

    http
      .delete(url)
      .then(location.reload)
      .catch((err) => console.log(err));
Code-Apprentice
  • 81,660
  • 23
  • 145
  • 268