How to delete a cookie using jQuery?

Question

I want to use jQuery to delete cookies; I have tried this:

$.cookie('name', '', { expires: -1 });

But when I refresh the page, the cookie is still there:

alert('name:' +$.cookie('name'));

Why?

Mccloud

some browser will delete the cookie only after the browser is restarted. – Ventral

Answer 1

To delete a cookie with JQuery, set the value to null:

$.cookie("name", null, { path: '/' });

Edit: The final solution was to explicitly specify the path property whenever accessing the cookie, because the OP accesses the cookie from multiple pages in different directories, and thus the default paths were different (this was not described in the original question). The solution was discovered in discussion below, which explains why this answer was accepted - despite not being correct.

For some versions jQ cookie the solution above will set the cookie to string null. Thus not removing the cookie. Use the code as suggested below instead.

$.removeCookie('the_cookie', { path: '/' });

Troika

But from the source here: plugins.jquery.com/files/jquery.cookie.js.txt : if (value === null) { value = '';options.expires = -1;}, that what goes inside the processing function, so they are supposed to perform the same. (parameters are (name, value, options)) – Mclaurin

Is the cookie setting code and test code on the same page? If not, you'll need to explicitly set the path in the options to both commands, as it defaults to the path of the current page. Test by setting to root of your domain both in all places where the cookie is read and written: $.cookie('name', value, {path:'/'}) – Troika

Chadwick>Maybe you are right. For exm. i set cookies in site.com, then go in site.com/user, site.com/user/mod, site.com/user/mod/new and i wish see cookies in all this page. How must looks like path, like this: {path:'/'}? – Mccloud

@gloris Correct, so in every use of the cookie (read or write) specify the same path, since as you describe, the default path is different for many of your pages. If that works, I'll note in this answer that the final solution is in these comments. – Troika

When I use ,$.cookie("name", null); this cookie hasn't remove and it still with value of null. I am fine with that...$.removeCookie('cookieName', { path: '/' }); – Wyndham

This code doesn't remove the cookie, but set null in its value. – Tagalog

-1 because this doesn't actually remove the cookie. $.removeCookie('cookie_name') does. – Stralsund

+1 this removed the cookie for me properly. $.removeCookie returned an error for us. Dunno what's up there and didn't want to debug it. – Superconductivity

This does not work with certain versions. It will instead set the cookie to "null" use removeCookie instead as described below. – Tresatrescha

Answer 2

You can try this:

$.removeCookie('the_cookie', { path: '/' });

source: https://github.com/carhartl/jquery-cookie#readme

Villalobos

Yah.. I am fine with that – Wyndham

When you use a sub-domain you may also have to specify it. Especially because the period at the beginning of the domain name may be required (.www.example.com) – Ibnsina

Note, this did not work for us where the code needed to go into another function for whatever reason. $.cookie('name', null) as above seems to be more reliable. This remove cookie however might work for some people. – Superconductivity

This is actually the real answer! – Fable

Answer 3

You can also delete cookies without using jquery.cookie plugin:

document.cookie = 'NAMEOFYOURCOOKIE' + '=; expires=Thu, 01-Jan-70 00:00:01 GMT;';

Silvertongued

Answer 4

it is the problem of misunderstand of cookie. Browsers recognize cookie values for not just keys also compare the options path & domain. So Browsers recognize different value which cookie values that key is 'name' with server setting option(path='/'; domain='mydomain.com') and key is 'name' with no option.

Consonant

Answer 5

Try this

 $.cookie('_cookieName', null, { path: '/' });

The { path: '/' } do the job for you

Pena

Answer 6

Worked for me only when path was set, i.e.:

$.cookie('name', null, {path:'/'})

Overbuild

Downvoting cause you copy and paste my answer as yours – Pena

@OttoKanellis so I suggest to downwote the accepted answer too (cause it was edited after my answer) and downvote your answer too (cause you haven't highlighted importance of the path parameter)! – Overbuild

Answer 7

Actually the second part of the accepted answer is OK only for some cases, it depends on the js-cookie version that you have.

So either use js-cookie v1.5.1 $.removeCookie ($.cookie for other operations), or if you are using 2.0.0 or higher, the old APIs were changed to Cookies.remove (Cookies.set, Cookies.get, etc.)

I found a complete answer here.

Atomic

Answer 8

What you are doing is correct, the problem is somewhere else, e.g. the cookie is being set again somehow on refresh.

Mclaurin

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – Wurst

For this very answer, what I am saying is that OP is doing it the right way. Copy-pasting the OP code will be redundant, and adding another code will be confusing to the reader. One can scroll up and see what the OP was doing, it is the "essential part" here. However, if you feel like it will be better to include something (apparently some people, do... One of them even down-voted my answer :) ), just edit the answer and fix it accordingly. Regards – Mclaurin

The problem with links is that they tend to "rot" - they change, they move, they disappear (case in point - your link is already dead!). That is why we prefer that you quote the relevant text from the link along with it, so your answer will be self contained (see also meta.stackexchange.com/questions/8231/…) – Wurst

I am well aware of that, but again: this is not the case here. The whole answer above can be rewritten as "What you are doing is correct, the problem is somewhere else, e.g. the cookie is being set again somehow on refresh". So, again, link rot is a problem, including the answer itself beside the link is the way to go. It is just irrelevant to this answer. – Mclaurin

So again and again, if an answer contains one link, and that link is dead, does not mean the answer is not good enough. Some links are just there to provide additional details, but are not necessary for the completeness of the answer. This behavior seems to me like a badly programmed bot that does not have the basic NLP to understand the context link is given in. You should probably stop doing this. – Mclaurin