To extend our customer list, we want to add a delete Link in front of each customer. When the user clicks this link, we will use jQuery to call our API and remove the customer from the list.
If you are unfamiliar with jQuery, it is recommended to refer to the attached PDF before continuing.
In the views customers index file, a table heading 'Delete' is added and a button is placed inside each TD element for each customer. Bootstrap class 'BTN Dash link' is used to style the button like a link.
To handle the click event of these buttons, jQuery is added at the bottom of the file using the document.ready function. The buttons are given a class 'JS Dash delete' for JavaScript purposes. The table is also given an ID 'customers'. jQuery is then used to handle the click event of these buttons.
At this point, a confirmation box is displayed when the delete link is clicked. If the user confirms the deletion, the API is called using jQuery ajax. The ID of the customer is obtained using a data attribute in the button. The method is set to delete and a callback function is provided when the call is successful.
Finally, the table row that includes the customer is removed using jQuery's remove() method in the success function.
video txt