JS 011 — CRUD DELETE request

Greem

·

Follow

Nov 19, 2023

--

Listen

Share

//line 42
// Create a DELETE request 
        function deleteResource(url){
            return fetch(url,{
                method: 'DELETE', 
                headers: {
                  'Content-Type': 'application/json',
                }
            })
            .then(res => res.json())
        }

//line 83
function renderBookCard(cardData) {
            const li = document.createElement('li')
            li.className = 'list-li'
    
            //Event Listeners 
            //* Pass Delete handler
            btn.addEventListener('click',
                     (e)=> handleDelete(cardData.id, e.target.parentElement))
            //* Add eventListener that will trigger an update when the value is changed
            pInventory.addEventListener('change', (e) => handleUpdateInventory(e.target.value, cardData.id))
            li.append(h3,pAuthor,pPrice, pInventory, img, btn)
            document.querySelector('#book-list').append(li)
        }

//line 134
//* Create handler that will call DELETE request and update the dom pessimistically
        function handleDelete(id, target){
            deleteResource(`http://localhost:3000/books/${id}`)
            .then(() => target.remove())
            .catch(e => console.error(e))
        }