Delete

Nå skal vi sette opp funksjonalitet for slette-knappen. Den er ganske lik edit-knappen, med noen modifikasjoner. La oss hoppe tilbake inn i browser.js:

Rett over linja if (event.target.classList.contains(‘edit-me’)) kan du legge inn en kommentar. Dette er kun for å holde oss organisert:

// Update feature

Rett over kommentaren kan du lage enda en kommentar hvor det står Delete Feature.

Under denne kommentaren kan du kopiere inn 

if (event.target.classList.contains('edit-me') {

}

Men, nå ønsker vi ikke å sjekke om edit-me blir trykket, men heller delete-me, så bytt argumentet i contains() til det.

Inni denne if-setningen vil vi sette opp enda en if-setning, som benytter en browser-metode som heter confirm:

if (confirm('Do you really want to delete this item?')) {

}

Confirm vil gi brukeren muligheten til å bekrefte eller avkrefte slettingen, og gir koden vår enten true eller false som resultat.

Inni blokka på denne if-metoden (altså mellom krøllparantesene) kan vi kopiere inn hele fetch-metoden som vi brukte for å edit item, for å spare oss for litt skriving. Noen endringer må vi gjøre:

1. I post-metoden kan vi bytte ut ‘/update-item’ med ‘/delete-item’. 
2. Når vi skal sende en request om å slette et item trenger vi bare id’en til mongoDB dokumentet, så vi kan fjerne “text”: userInput.
3. Vi må fortsatt ha tak i id’en fra elementet, så vi må legge til “data-id”-attributtet på knappe-elementet i HTML-koden.
4. I then()-metoden må vi slette raden som todo’en hadde. Vi kan bruke event.target.parentElement.parentElement.remove()

Koden etter nødvendige endringer:

// Delete Feature
if (event.target.classList.contains('edit-me')) {
  if (confirm("Do you really want to delete this item?")) {
    fetch('/delete-item', {
        method: "post",
        headers: {
          'content-type': 'application/json'
        },
        body: JSON.stringify({
          "id": event.target.getAttribute('data-id'),
        })
      })
      .then(function () {
        event.target.parentElement.parentElement.remove();
      })
      .catch(function () {
        console.log("Please try again later")
      })
    }
  }

Det eneste som gjenstår nå, er å kode et POST-endepunkt på serveren, altså i server.js, som håndterer selve slettingen fra databasen.

Dette endepunktet er ganske likt, men litt tynnere enn update-endepunktet.

app.post('/delete-item', function (req, res) {
db.collection('items')
  .deleteOne(
    {_id: new mongodb.ObjectId(req.body.id)},
    function() {
      res.send("Success!")
    }
  )
})