In this article I will explain with an example, how to delete Cookie using jQuery i.e. remove Cookie from Browser using jQuery.
The jQuery Cookie Plugin
This article makes use of the jQuery Cookie Plugin. This article covers basics of adding and deleting Cookies. For more advanced usage, please refer jQuery Cookie Plugin Documentation.
Delete (Remove) Cookies in jQuery
The following HTML Markup consists of an HTML TextBox, a HTML Button and a HTML SPAN for adding cookie using jQuery.
Inside the jQuery document ready event handler, each button has been assigned with jQuery Click event handler.
Adding Cookies
When the Add Cookie Button is clicked, the respective jQuery event handler is executed which saves the value of the Name TextBox to browser Cookie using the $.cookie function.
The $.cookie function accepts two parameters, first the Name (Key) of the Cookie and second the Value to be stored in the Cookie.
Deleting Cookies
When the Delete Cookie Button is clicked, the respective jQuery event handler is executed which removes the Cookie using the $.removeCookie function.
The $.removeCookie function accepts the Name (Key) of the Cookie in order to remove the Cookie.
Name:
<input type="text" id="txtName" />
<br />
<br />
<input id="btnAdd" type="button" value="Add Cookie" />
<input id="btnDelete" type="button" value="Delete Cookie" />
<hr />
<span id="lblCookie"></span>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnAdd").click(function () {
$.cookie("Name", $("#txtName").val());
$("#lblCookie").html($.cookie("Name"));
});
$("#btnDelete").click(function () {
$.removeCookie("Name");
if ($.cookie("Name") == null) {
$("#lblCookie").html("");
}
});
});
</script>
Screenshot
![jQuery Delete Cookie: Remove Cookies in jQuery example]()
Demo
Downloads
