DELETE Request to REST API
Explore how to add DELETE functionality to your WordPress site by using event listeners to send REST API requests. Understand how to remove posts from the database and update the frontend dynamically without manual refreshes. This lesson guides you through capturing post IDs, sending authenticated fetch DELETE requests, and reflecting post deletions in real time, helping you build interactive WordPress themes.
We'll cover the following...
On the Lecture Notes page, every lecture post has a Delete button associated with it. We will create an event listener to respond to a click event on it.
With the Excellence folder open in VS code, access the terminal by clicking the "View" option and choosing "Terminal". Run the start script using the
npm run startcommand. The start script will watch for any changes in the code and recompile it.
Click event on Delete button
To add an event listener to the Delete button, first we will select all Delete buttons in the deleteButtons variable using the querySelectorAll method. We gave the Delete button a class of delete-lecture (in page-lecture-notes.php).
constructor(){//...this.deleteButtons = document.querySelectorAll(".delete-lecture");//...}
The deleteButton variable is a NodeList of all elements with the class delete-lecture. In the events method, loop through the NodeList and attach an event listener to each item. When a click event occurs, the callback method deleteLecture is called. This method displays a message on the ...