Estoy trabajando en un proyecto crudo y quiero eliminar un elemento por id usando MongoDB, express y node.
aquí está la funcionalidad para que elimine un elemento:
router.get('/delete/:id', async (req, res) => { try { const topic = await Topic.findById(req.params.id) await Topic.remove({ _id: req.params.id }) res.redirect('/dashboard') } catch (error) { console.log(error) } })aquí está la porción ejs para cuando un usuario hace clic en el elemento que se eliminará:
<div class="modifyTopic"> <a href="/edit/<% topic._id %>"><i class="fas fa-edit fa-2x"></i></a> <a href="/delete/<%= topic._id %>"><i class="fas fa-trash fa-2x"></i></a> </div>este código realmente funciona, pero cuando cambio el método de obtención a un método de eliminación como este:
router.delete('/delete/:id', async (req, res) => { try { const topic = await Topic.findById(req.params.id) await Topic.remove({ _id: req.params.id }) res.redirect('/dashboard') } catch (error) { console.log(error) } })no funciona. Recibo un mensaje en el navegador que dice "Cannot GET /delete/62def4aae6c2c1914cfa145fer3", ¿por qué es esto? ¿Debería usar el método de eliminación en lugar de hacerlo bien? ¿Cómo puedo hacer que esto funcione con el enfoque de eliminación?
Al hacer clic en una etiqueta <a> se realiza una solicitud GET. Para acceder a su ruta router.delete() , tiene dos opciones...
Opción 1
Intercepte el evento con JavaScript y envíe una solicitud DELETE asíncrona.
Incluya una sección <script> en su vista con algo como lo siguiente...
// Delegated event listener document.addEventListener("click", async (e) => { const del = e.target.closest("a i.fa-trash"); if (del) { // clicked on a "trash" icon e.preventDefault(); const { href } = del.closest("a"); // get the href const res = await fetch(href, { method: "DELETE", // send a DELETE request redirect: "manual", // don't follow redirects }); if (res.ok) { // request successful window.location = res.headers.get("location") ?? "/dashboard"; } else { console.error(res); } } });En este escenario, es posible que no desee responder con una redirección ya que está manejando la acción de seguimiento del lado del cliente. Ver esta respuesta para más detalles
Opcion 2
Utilice el middleware de anulación de métodos para simular una solicitud DELETE .
Registre el middleware en su aplicación
const methodOverride = require("method-override"); app.use(methodOverride("_method", { methods: ["GET", "POST"], // GET is not recommended, see below });y agregue el parámetro de cadena de consulta apropiado a sus enlaces
<a href="/delete/<%= topic._id %>?_method=DELETE"> <i class="fas fa-trash fa-2x"></i> </a> Tenga en cuenta que eliminar a través de una solicitud GET puede ser muy peligroso . Al menos recomendaría usar un <form> en su lugar
<form action="/delete/<%= topic._id %>?_method=DELETE" method="POST"> <button type="submit" class="btn-text"> <i class="fas fa-trash fa-2x"></i> </button> </form>