如何根据Cookie值从页面中删除元素？

Question

I want to create a button on my webpage, which when clicked, sets a cookie with a specified value. The cookie should be valid for the entire domain, all its directories and sub-domains.

The code I'm using now is this:

function setCookie(cname, cvalue, exdays)
    {
        var d = new Date();
        d.setTime(d.getTime() + (365*24*60*60*1000));
        var expires = "expires="+ d.toUTCString();
        document.cookie = cname + "name1" + cvalue + "value1" + expires + ";path=/";
    }

Then, once the cookie and its value is set, I want that button to get deleted from the page. Also, next time the page loads, I want to check if the cookie and the value exists and if not, show the button or else, delete the button.

The button in context has an id: delete

I'm using this code to check for cookie and its value:

function getCookie(name1)
    {
        var name = name1 + "value1";
        var decodedCookie = decodeURIComponent(document.cookie);
        var ca = decodedCookie.split(';');

        for(var i = 0; i <ca.length; i++)
            {
                var c = ca[i];

                while (c.charAt(0) == ' ')
                    {
                        c = c.substring(1);
                    }

                if (c.indexOf(name) == 0)
                    {
                        return c.substring(name.length, c.length);
                    }
            }

        return "";
    }

I've found these codes from here: https://www.w3schools.com/js/js_cookies.asp

I'm going to use this code to delete the element if the cookie and its value is present:

function removeElement(elementId)
    {
        var element = document.getElementById(delete);
        element.parentNode.removeChild(element);
    }

I've taken this code from here: https://www.abeautifulsite.net/adding-and-removing-elements-on-the-fly-using-javascript

I don't know how to link those 2 fuctions to carry out the required action.

Answer 1

Here is a working solution for you. Take a look at the comments inside the Code.

Are u new to JS? in this case you should take a look at codecademy . Its for free and you will learn the basics very fast.

Note that SO does not allow you to check or set cookies. For that reason the runable code below will cause an error. Here is a working fiddle .

 if (getCookie('myCookie')) removeElement('myButton'); // remove if cookie is set if (document.getElementById('myButton')) document.getElementById('myButton').onclick = function() { // bind function to clickevent setCookie('myCookie', 'myValue', 1); // set cookie removeElement('myButton'); // remove button } function setCookie(cname, cvalue, exdays) { // your setCookie Funktion var d = new Date(); d.setTime(d.getTime() + (365 * 24 * 60 * 60 * 1000)); var expires = "expires=" + d.toUTCString(); document.cookie = cname + '=' + cvalue + '; '+ expires + ";path=/"; // reset to w3schools solution } function getCookie(name) { // your getCookie Funktion // removed 'var name = ...' because you wont find your cookie if you changing the name here var decodedCookie = decodeURIComponent(document.cookie); var ca = decodedCookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') { c = c.substring(1); } if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); } } return ""; } function removeElement(elementId) { // your removeElement Function var element = document.getElementById(elementId); // variable delete was undefined, if your buttons id was delete you had to write it in '' element.parentNode.removeChild(element); } 

 <button type="button" id="myButton"> click me </button> 

Answer 2

Going by your requirements you just want to delete a specific button if the cookie is present. In this case you will need to do 2 things.

1. Call the getCookie and based on the return value call the removeElement at the end of the setCookie method.

   Note: I am assuming your setCookie method is synchronous .

2. Load the button by default and do the same as Step 1 once the page is loaded .

To summarize, your mrthods should look like this:

setCookie method:

function setCookie(cname, cvalue, exdays){
    var d = new Date();
    d.setTime(d.getTime() + (365*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "name1" + cvalue + "value1" + expires + ";path=/";
    if(getCookie(cname)) removeElement('delete');
}

After Loading the document:

document.onload = ()=>{
    if(getCookie(cname)) removeElement('delete');
}