Deleting A Contact

Lecture 268:- Deleting A Contact

To delete a contact, we need to perform an HTTP DELETE request to the server, passing the ID of the contact we want to delete as a parameter. Here are the steps we can follow to implement this functionality in our contact list app:

1. In our server-side code, we need to define a route for handling DELETE requests to the /contacts endpoint with an id parameter. For example:

   javascriptCopy code

   app.delete('/contacts/:id', (req, res) => {  const id = req.params.id;  // delete the contact with the specified id from the database  // return a response indicating success or failure });

2. In our client-side code, we need to attach a click event listener to the "Delete" button of each contact in the list. When the button is clicked, we need to extract the ID of the corresponding contact and send a DELETE request to the server with that ID as a parameter. For example:

   javascriptCopy code

   // assume each contact in the list has an HTML structure like this: // <li data-id="123">John Doe <button>Delete</button></li> const contactsList = document.querySelector('#contacts-list'); contactsList.addEventListener('click', event => {  const target = event.target;  if (target.tagName === 'BUTTON') {    const contact = target.parentElement;    const id = contact.dataset.id;    fetch(`/contacts/${id}`, { method: 'DELETE' })      .then(response => {        if (response.ok) {          // remove the contact from the list          contact.remove();        } else {          console.error('Failed to delete contact:', response.statusText);        }      })      .catch(error => {        console.error('Failed to delete contact:', error);      });  } });

3. In our server-side code, we need to implement the actual deletion of the contact with the specified ID from the database. The specifics of this step will depend on the database technology we are using, but generally we will need to execute a DELETE query or command with the appropriate parameters. For example, if we are using MongoDB with the Mongoose library, we might write code like this:

   javascriptCopy code

   const Contact = require('./models/contact'); app.delete('/contacts/:id', (req, res) => {  const id = req.params.id;  Contact.findByIdAndDelete(id)    .then(deletedContact => {      if (deletedContact) {        res.sendStatus(204); // success with no content      } else {        res.sendStatus(404); // not found      }    })    .catch(error => {      console.error('Failed to delete contact:', error);      res.sendStatus(500); // internal server error    }); });

   This code assumes that we have defined a Mongoose schema and model for our contacts and imported them as Contact. The findByIdAndDelete() method is a convenience method provided by Mongoose that finds a document with the specified ID and removes it from the database.

With these steps implemented, our contact list app should now be able to delete contacts from the list and from the database.