How to make a delete request

خطوات عمل الــ delete request

1 Create button with data- attribute

for example, in ejs file :

 
<button data-linkid="<%= objArticle._id %>" class="create">
    Delete this article
</button>

2 use JavaScript fetch api :

for example, in ejs file :

<script>
  const btnelement=document.querySelector(".create")
  const articleId=btnelement.getAttribute("data-linkid");


  // what is data ?
  // answerrrrrrrrrrrrrrrrrr


  btnelement.addEventListener("click", (eo)=> {

  fetch(`/all-articles/${ articleId}`, { method: "DELETE" } )
  .then((response)=> response.json())
  .then((data)=> console.log(data))
  .catch((err)=> {
  console.log(err);
  } );

  } )
</script>

3 app.delete(PATH, (req, res)=> { } )

in app.js :

 
app.delete("/all-articles/:id", (req, res) => {
  Article.findByIdAndDelete(req.params.id)
    .then((params) => {})
    .catch((err) => {
      console.log(err);
    });
});

المصادر

Model.findByIdAndDelete()

fetch api

Express routing

الفيديو

تحميل الملفات

تحميل الملفات الخاصة بهذا الدرس

URL redirection with delete request

خطوات عمل الــ delete request & redirection

1 Create button with data- attribute

for example, in ejs file :

 
<button data-linkid="<%= objArticle._id %>" class="create">
    Delete this article
</button>

2 use JavaScript fetch api :

for example, in ejs file :

<script>
  const btnelement=document.querySelector(".create")
  const articleId=btnelement.getAttribute("data-linkid");


  // what is data ?
  // { mylink: "/all-articles" }


  btnelement.addEventListener("click", (eo)=> {

  fetch(` /all-articles/${ articleId} `, { method: "DELETE" } )
  .then((response)=> response.json())
  .then((data)=> window.location.href=data .mylink
  .catch((err)=> {
  console.log(err);
  } );

  } )
</script>

3 app.delete(PATH, (req, res)=> { } )

in app.js :

app.delete("/all-articles/:id", (req, res)=> {
  Article.findByIdAndDelete(req.params.id)

  .then((params)=> {
    res.json( {mylink: "/all-articles"} );
  })

  .catch((err)=> {
    console.log(err);
  });
});

المصادر

res.json()

الفيديو

تحميل الملفات

تحميل الملفات الخاصة بهذا الدرس