Up next in 10
Javascript Gmail API Example to Delete Inbox Messages Permanently Using Fetch API & OAuth2
Dec 9, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/javascript-gmail-api-example-to-delete-inbox-messages-permanently-using-fetch-api-oauth2/
Show More Show Less View Video Transcript
0:00
Uh hello friends, today in this tutorial
0:02
we will be talking about specifically
0:04
how to delete uh messages from your
0:06
Gmail account inbox messages. So we will
0:09
be using the Gmail API method which is
0:11
called as delete method. This is a
0:13
documentation you can see here. It
0:14
immediately and permanently deletes the
0:16
specified message. It will not move the
0:19
message to trash. It will permanently
0:21
delete it. You will not be able to
0:22
recover the message. So you need to
0:25
basically run this very cautiously
0:28
because you will lose your information.
0:29
So now let's suppose you don't want the
0:32
messages that you see. We'll be adding a
0:33
delete button right here in this
0:35
specific tutorial. So this will also
0:37
clear out a lot of space. If you don't
0:39
want unwanted emails, you can delete
0:41
them by using this simple endpoint here.
0:44
This is HTTP endpoint. We will be
0:46
hitting it using the fetch API. We will
0:49
be making a simple delete request to
0:50
this http gmail.com/gmail.
0:54
And here it takes two arguments guys.
0:56
First is the user ID. User ID simply
0:59
means which user email address you are
1:01
working upon. Uh for this tutorial we
1:04
are using o2 authentication. We will be
1:06
working upon your our own email address.
1:09
So this time this value will be me.
1:11
Simply like this. And now the second
1:13
parameter it takes guys is the message
1:16
ID. this ID of the message to delete. So
1:19
every message as you know guys if I open
1:22
my Gmail inbox let me show you the
1:24
messages. Every message has a unique ID.
1:27
So let's suppose I take this email
1:29
address. Let's suppose so you can see
1:31
this is the ID that you see right here.
1:34
This is the ID this garbage numbers
1:36
here. Simply copy this and basically
1:38
paste it here. And uh if I paste it here
1:41
and uh we can simply run it using Google
1:44
2. So what will happen guys? If I
1:46
execute this query, this message will be
1:48
deleted permanently. I cannot recover
1:50
it. You will see invalid ID value. It is
1:53
saying invalid ID value. Uh
1:57
uh basically if you see uh if I run this
2:00
here inside my tutorial here, this is
2:03
the application here. So you will see
2:05
all if I inspect element if you see this
2:09
is my latest message here. Let me see
2:11
here.
2:13
Go to console. You will see this uh five
2:17
messages are returned. So every message
2:18
has its own id. So this is the ID that
2:20
you need to copy paste. This is the
2:23
message that you have.
2:26
You can see this is the ID. If you copy
2:29
this ID here and if you paste it right
2:32
here after this inbox, you can see the
2:34
same message will be opening here. You
2:36
can see this is a message here. Let's
2:37
suppose I want to delete this message.
2:39
So what I will do? I will simply paste
2:41
this ID right here.
2:43
So [snorts] simply if I paste this ID
2:45
here, execute this query, this message
2:47
will be deleted. So now if I execute
2:50
this, you will see 204 success point is
2:54
there. So this means that your delete
2:56
query is successfully executed. Now if I
2:59
try to open this message, you will see
3:01
that I will not be able to because the
3:04
conversation that you requested could
3:06
not be loaded because that message has
3:08
been successfully deleted. So now we
3:10
don't have that message. you will see
3:12
that. So in this way guys you can delete
3:15
messages any message that you want to
3:17
do. It's really nice to delete. And now
3:21
let's get started how basically we can
3:23
do this process inside our tutorials. So
3:26
you can see we will be adding a simple
3:28
delete button. So this is a playlist of
3:30
tutorials guys. So mastering the Gmail
3:31
API. So I think it's the fifth tutorial
3:34
in the playlist. So if you haven't
3:36
watched the previous four tutorials I
3:38
will highly recommend because we have
3:39
made cool little features. because we
3:41
are displaying inbox messages inside
3:44
this table and we are also searching the
3:46
messages also. So this all that we have
3:48
done in the last four tutorials. So
3:50
definitely watch them before you proceed
3:52
with this one. So now if I click delete
3:55
guys simply if I click delete this
3:57
message will be permanently deleted. So
3:59
now let me just uh again refresh it
4:02
here.
4:04
So you will see this is a message
4:08
and if I check here
4:11
this is a promotional message here
4:12
you'll see that.
4:14
So if we can simply click the delete
4:16
button and basically if you click delete
4:18
button here it will make a simple fetch
4:20
delete request
4:23
and that message will be deleted and you
4:24
can see it is removed from this table as
4:26
well. You can see that this is Monday
4:29
5th. You can see the date as well. The
4:32
same message here. Security alert.
4:34
Google APIs explorer was granted access.
4:37
If I just click delete here, this
4:40
message will be deleted. And now if I
4:42
refresh it, you will see this message
4:44
will be gone.
4:48
If you see no longer that message is no
4:50
longer there. So in this way guys, you
4:53
can delete messages. And now let me show
4:55
you how you can do this inside your
4:57
code. For this tutorial guys, I have
4:59
explained detail in this blog post. The
5:02
link is given in the description of this
5:04
video. So definitely read this blog post
5:07
alongside with watching the video. So
5:09
right here guys, basically let me delete
5:12
uh sorry delete the code and start from
5:15
scratch so that you guys can be able to
5:19
learn.
5:21
So now guys you will see that if I now
5:23
refresh it, no delete button will be
5:25
there.
5:27
If you open your application, no button
5:29
will be there. So now we need to add a
5:31
first of all if you go to your profile
5:33
html, we need to add this table heading
5:37
which is called as delete. And after
5:40
this go to profile.js. So so here inside
5:43
this inner HTML property we are
5:45
basically looping out for all the
5:48
messages we are displaying its ID and
5:51
basically we are displaying the column
5:53
names. So right here after this trash
5:56
button we will have a simple delete
5:58
button. So as a table data row we will
6:01
have a simple button here and uh so this
6:05
button label will be simply delete. So
6:08
inside this guys we will be attaching a
6:10
simple on click to it. So whenever you
6:12
click this button what will happen
6:14
inside this double quotes we will make a
6:17
simple fetch call here.
6:19
So this fetch call will be the same that
6:21
we discussed at the starting video. So
6:23
you'll see this is the [snorts] endpoint
6:26
we will be hitting here. Simply copy
6:27
this endpoint and paste it here.
6:31
So here we need to replace the values.
6:33
So id is coming inside this loop which
6:35
is present inside message data dot id.
6:38
So this is the id of the message and
6:40
user id as I explained you this is we
6:42
are doing it for our own account. So
6:44
that's why this value will be me. So put
6:46
a comma here and set of curly brackets.
6:49
The method here will be this time be
6:51
delete not post
6:54
delete.
6:55
And here we also need to provide the
6:57
headers as well. So we need to pass the
7:00
access token for this operation to be
7:02
occurred. So inside curly brackets we
7:05
write here authorization
7:07
colon and then inside single quotes you
7:09
need to write B E A R E R and then
7:12
followed by your access token
7:16
like this. So this method guys returns a
7:18
promise. So whenever it's completed it
7:20
returns this inside dot then
7:25
we can console log info and then we can
7:28
also remove this message from the screen
7:30
as well from the DOM. So we can simply
7:33
you can see inside TR we have given this
7:36
ID to each message a unique ID. So we
7:39
just need to remove this also.
7:43
So after this we can simply target it by
7:46
the ID that we have given.
7:52
So this we can simply say message data
7:57
dot id and we can call the remove method
8:00
which is there for javascript to remove
8:03
elements from the dom. That's it. So now
8:05
if I just execute this application guys.
8:08
So what will happen as I click the
8:10
delete button your message will be
8:12
permanently deleted
8:14
if you see.
8:17
Now let's suppose I want to delete this
8:19
message which is this message today. You
8:22
will see founder your email.
8:24
Click on delete. So you can see that
8:27
message was deleted. You will see that.
8:33
So if you see
8:36
if I open this Gmail inbox and try to
8:40
access this message I will no longer be
8:42
tried. You can see this conversation was
8:44
deleted could not be loaded.
8:48
So [snorts] no longer that message is
8:50
there. So in this way guys you can
8:52
delete messages here and uh
8:56
it's a very simple way by which you can
8:58
do this process.
9:01
So thank you very much for watching this
9:03
video guys and uh I will be seeing you
9:05
in the next video.