Welcome folks today in this blog post we will be deleting the inbox messages permanently from the gmail user account using the gmail api in browser using javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to read the below blog posts to get on the same page as I will start in this blog post. Before that I have shown successfully how to successfully move the inbox messages from gmail account into trash and also how to search inbox messages using querystring in gmail api v3 in javascript. Read it first before beginning this one. Link is given as follows

Javascript Gmail API Example to Search Inbox Messages Based on Keyword Using Fetch API & OAuth2 in Browser

And after that you will have the below directory structure of the project

Now we need to edit the profile.html file of the project and add a simple <th> inside the table for the delete button

Now we need to go to profile.js of the project and we need to add the below button inside the innerHTML property of the table as shown below

<td>
          <button
          onclick="
          fetch('https://gmail.googleapis.com/gmail/v1/users/me/messages/${messageData.id}',{
            method:'DELETE',
            headers:new Headers({Authorization:'Bearer ${ACCESS_TOKEN}'})
          })
          .then((info) => {
            console.log(info)
            document.getElementById('${messageData.id}').remove()
          })
          "
          >Delete</button>
          </td>

<td>

<button

onclick="

fetch('https://gmail.googleapis.com/gmail/v1/users/me/messages/${messageData.id}',{

method:'DELETE',

headers:new Headers({Authorization:'Bearer ${ACCESS_TOKEN}'})

})

.then((info) => {

console.log(info)

document.getElementById('${messageData.id}').remove()

})

>Delete</button>

</td>

As you can see we are adding the table data row inside it we have the simple button of delete and if we press the button we are adding the onclick attribute and inside it we are making a simple DELETE request using the fetch api and also we are providing the access token as the header and it returns the promise and then we are also removing the message from the table in the DOM.

Now if you open the app you will see the below result

Javascript Gmail API Example to Delete Inbox Messages Permanently Using Fetch API & OAuth2 in Browser

Get Started

FULL SOURCE CODE