unable to delete jquery cookie

im using jquery cookie to pass value of the element clicked on my first page to be used on the next page. The problem im experiencing is that whenever i set the cookie to null the value doesn't delete. it still remains.

jquery script on my first page

<script>
$(document).ready(function() {
    $("div.product-header").click(function() {
        var index = $("div.product-header").index(this);
        $.cookie("product_name", index);
        //alert("product category: "+$.cookie("product_name"));
    });
    $("div.product-subheader").click(function() {
        var index = $("div.product-subheader").index(this);
        $.cookie("product_subheader", index);
        //alert("product category item: "+$.cookie("product_subheader"));
    });
});
</script>

second page script which will use the cookie (on this page the cookie is working right)

<script>
$(document).ready(function () {
    $(".product-contents").hide();
    $('div.product-header').eq($.cookie('product_name')).addClass('active').next().show(); 
    $('div.product-subheader').eq($.cookie('product_subheader')).css({fontWeight: 'bold', backgroundColor: '#eeeeee'});             
    $('div.product-header').click(function(){
       $.cookie('product_name',$('div.product-header').index(this));
        if( $(this).next().is(':hidden') ) { 
            $('div.product-header').removeClass('active').next().hide(); 
            $(this).toggleClass('active').next().show();
        }
        return false; 
    });
});
</script>

but when i try to use script on the second page; cookie doesn't deleted whenever i used the $.cookie("product_name", null); and $.cookie("product_subheader", null); the cookie still doesn't deleted

<script>
$(document).ready(function() {
    $("div.product-header").click(function() {
        $.cookie("product_name", null);
        alert("cookie product category should be null not: "+$.cookie("product_name"));

        var index = $("div.product-header").index(this);
        $.cookie("product_name", index);
    });

    $("div.product-subheader").click(function() {
        $.cookie("product_subheader", null);
        alert("cookie product category item should be null not: "+$.cookie("product_subheader"));   

        var index = $("div.product-subheader").index(this);
      开发者_开发知识库  $.cookie("product_subheader", index);
    });
});
</script>

any corrections on my code above?

You will have to specify the path when you set the cookie. Use

 $.cookie("product_name", index, { path: '/' });

That should allow you to remove it from pages other than the one that created the cookie.