Hide div after page reloaded on sweet alert-CodePudding

i'm using sweetalert in ajax post data, and have a div element that i want to hide after page reload, from the code below what i can do to do that :

$(document).ready(function() {
    $(document).on('click', '#approve', function() {
        swal.fire({
            title: 'Are you sure ?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes',
            cancelButtonText: 'Cancel',
        }).then((result) => {
            if (result.value) {
                $('.leftForms').each(function(e) {
                    valuesToSend = $(this).serialize();
                    $.ajax($(this).attr('action'), {
                            url: 'data.php',
                            type: 'POST',
                            method: $(this).attr('method'),
                            data: valuesToSend
                        })
                        .done(function(response) {
                            swal.fire({
                                title: 'Data berhasil diupdate!',
                                text: response.message,
                                icon: 'success'
                            }).then(function() {
                                location.reload();
                                localStorage.removeItem('leftcontent');
                                localStorage.getItem('rightcontent', data);
                            });   
                        })
                });
            }
        })
    });
});

i want to hide this, at the moment after location.reload(), is that possible ?

<div id="content1">
<p>blaa..blaa.. bla..</p>
</div>

CodePudding user response：

Why are you reloading the page ? You can hide remove the div using JavaScript instead. Instead of location.reload(); do $("#content1").remove(); to remove the element or $("#content1").hide() to hide it. Also localStorage.removeItem('leftcontent'); and localStorage.getItem('rightcontent', data); isn't being executed.

CodePudding user response：

if you want this choice to actually persist you need to save something to a database for clear reasons, you could use local storage but it will be cleared if the user clears the cache, just save the choice to the local storage then just check for that var when the page reloads and remove the element with:

...
.then(function() {
    localStorage.setItem('choice','hide');
    location.reload();

$(document).ready(function() {
    if(localStorage.getItem('choice')=='hide'){
        $("#content1").remove();
    }
...

but as @Gazmend pointed out you don't even need to reload the page, just remove the element instead of reloading if reloading is not necessary for other reasons