Hey there! Let’s tackle this delete functionality issue you’re having with your Node.js + MongoDB CRUD app. I’ve hit similar snags before, so let’s break down the most common culprits and actionable fixes:

First, let’s make sure your backend route is set up correctly—this is where most delete bugs start:

• Double-check the HTTP method: Ensure your route uses DELETE (not GET or POST by mistake). For example:

  app.delete('/photos/:id', async (req, res) => {
    // Your delete logic here
  });
  

• Verify ID retrieval: Make sure you’re grabbing the correct photo ID from the request. It’s easy to typo req.params.id as req.param.id—small mistake, big impact.
• Add proper error handling: Without catching errors, you’ll never know if the database operation failed. Wrap your delete code in a try/catch block and check if the photo exists before proceeding:

  app.delete('/photos/:id', async (req, res) => {
    try {
      const deletedPhoto = await Photo.findByIdAndDelete(req.params.id);
      // If no photo matches the ID, send a 404 instead of proceeding
      if (!deletedPhoto) {
        return res.status(404).send("Photo not found in database");
      }
      // Trigger redirect only if deletion succeeds
      res.redirect('/photos');
    } catch (err) {
      console.error("Delete error:", err);
      res.status(500).send("Failed to delete photo");
    }
  });
  

  This ensures you only redirect when the deletion actually works, and you’ll see any errors in your server logs.

If your backend route looks solid, the issue might be how your frontend is sending the delete request:

• Form submissions (traditional): HTML forms don’t support DELETE natively. To get around this, use the method-override middleware:
  1. Install it first: npm install method-override
  2. Add it to your app setup: app.use(methodOverride('_method'));
  3. Update your form to send a POST request with a hidden _method field:

     <form action="/photos/{{photo._id}}" method="POST">
       <input type="hidden" name="_method" value="DELETE">
       <button type="submit">Delete Photo</button>
     </form>
     

• AJAX/fetch requests: If you’re using JavaScript to send the request (like fetch or Axios), the backend’s res.redirect() won’t trigger a page reload—AJAX handles the redirect response internally. You need to manually redirect in the frontend after a successful request:

  async function deletePhoto(photoId) {
    try {
      const response = await fetch(`/photos/${photoId}`, {
        method: 'DELETE',
        headers: { 'Content-Type': 'application/json' }
      });
      if (response.ok) {
        // Manually redirect to /photos after successful deletion
        window.location.href = '/photos';
      } else {
        alert("Failed to delete photo");
      }
    } catch (err) {
      console.error("Delete request error:", err);
    }
  }
  

  This is a super common gotcha—don’t forget that AJAX doesn’t respect backend redirects the same way traditional form submissions do.

Even if deletion works, the redirect might fail for these reasons:

• Multiple response sends: If you have code like res.send("Deleted!") before res.redirect('/photos'), the redirect will never execute—you can only send one response per request.
• Check the /photos route: Make sure your /photos route is working correctly on its own. Try visiting it directly in your browser to confirm it loads without errors.
• CORS or authentication issues: If you’re using auth middleware, ensure the user has permission to access /photos after deletion.

Finally, confirm your database setup isn’t the problem:

• Check your Photo model: Ensure you haven’t overridden the default _id field in your Mongoose model. It should use MongoDB’s native ObjectId unless you explicitly set a custom ID.
• Verify deletion in the database: After attempting a delete, check MongoDB Compass or run db.photos.find() in the Mongo shell to see if the document was actually removed. If it’s still there, your database operation is failing silently.

Start with checking the route method and error handling—those are the quickest wins. If you’re still stuck, sharing snippets of your delete route and frontend code would help narrow things down further!

内容的提问来源于stack exchange，提问作者AlexWHY