Notes for deleting an item

deleting_item.md

Deleting an item

Video link: https://www.udemy.com/course/learn-javascript-full-stack-from-scratch/learn/lecture/14422924#notes

Start by modifying this function in browser.js

// Edit functionality
document.addEventListener("click", function(e){

	// Delete feature
	if(e.target.classList.contains("delete-me")){
		// Ask the user if the really want to
		if(confirm("Do you really want to delete this item permanently?")){

		}
	}

	// Update feature
	if(e.target.classList.contains("edit-me")){
		let userInput = prompt("Enter your desired new text", e.target.parentElement.parentElement.querySelector(".item-text").innerHTML)
		// console.log(userInput)
		// Use axios to send data to server
		if(userInput){
			axios.post('/update-item', {text: userInput, id: e.target.getAttribute("data-id")}).then(function(){
				// do something interesting here in the next video
				// This is what runs when the axios request is complete
				e.target.parentElement.parentElement.querySelector(".item-text").innerHTML = userInput
			}).catch(function(){
				console.log("Please try again later")
			})
		}
	}
})

We have to make sure that the html template contains the id in the delete button also

Go to server.js

<ul class="list-group pb-5">
					${items.map(function(item){
						return `<li class="list-group-item list-group-item-action d-flex align-items-center justify-content-between">
										<span class="item-text">${item.text}</span>
										<div>
										<button data-id="${item._id}" class="edit-me btn btn-secondary btn-sm mr-1">Edit</button>
										<button data-id="${item._id}" class="delete-me btn btn-danger btn-sm">Delete</button>
										</div>
										</li>`
					}).join('')}
				</ul>

Back to browser.js

This is what the function will look like

// Edit functionality
document.addEventListener("click", function(e){

	// Delete feature
	if(e.target.classList.contains("delete-me")){
		// Ask the user if the really want to
		if(confirm("Do you really want to delete this item permanently?")){
			// Send async request to node server
			axios.post('/delete-item', {id: e.target.getAttribute("data-id")}).then(function(){
				// We should delete the related html
				e.target.parentElement.parentElement.remove()
			}).catch(function(){
				console.log("Please try again later")
			})
		}
	}

	// Update feature
	if(e.target.classList.contains("edit-me")){
		let userInput = prompt("Enter your desired new text", e.target.parentElement.parentElement.querySelector(".item-text").innerHTML)
		// console.log(userInput)
		// Use axios to send data to server
		if(userInput){
			axios.post('/update-item', {text: userInput, id: e.target.getAttribute("data-id")}).then(function(){
				// do something interesting here in the next video
				// This is what runs when the axios request is complete
				e.target.parentElement.parentElement.querySelector(".item-text").innerHTML = userInput
			}).catch(function(){
				console.log("Please try again later")
			})
		}
	}
})

Back to server.js

We are writing this function at the bottom of server.js

app.post('/delete-item', function(req, res){

})

Two arguments

app.post('/delete-item', function(req, res){
	// Perform CRUD
	db.collection('items').deleteOne(a, b)
})

a is the document we want to delete b is the function which will run when the db action is complete

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