навсегда удалить элемент списка кнопкой удаления

Question

Извините за беспокойство, но мне нужна помощь с этими кодами. Я пытаюсь окончательно удалить элементы из списка уведомлений, когда вы нажимаете кнопку удаления, но когда я обновляю sh страницу, уведомления возвращаются снова. Я использую этот код:

$(document).on('click', '.delete', function() {
$(this).closest('li').remove();
return false;
});

Код списка уведомлений следующий:

function WidgetNotifications() {
        jQuery('#wnotify').html(jQuery('#notif_list').html());

        if (!window.localStorage) return;
        var default_avatar = 'https://2img.net/i/fa/invision/pp-blank-thumb.png';
        var caching_time = 24 * 60 * 60 * 1000;
        var caching_error = 60 * 1000;
        var set_avatar = function(id) {
            jQuery('.lastpost-avatar2.wu' + id).html('<img class="avt-wid" alt="no_photo" src="' + get_avatar(id) + '" />');
        };

        var get_avatar = function(id) {
            if (localStorage.getItem('t_ava' + id) < +new Date - caching_time || (localStorage.getItem('d_ava' + id) == default_avatar && localStorage.getItem('t_ava' + id) < +new Date - caching_error)) {
                localStorage.setItem('d_ava' + id, default_avatar);
                jQuery.get('/u' + id, function(d) {
                    localStorage.setItem('t_ava' + id, +new Date);
            localStorage.setItem('d_ava' + id, jQuery('#mi-avatar img', d).first().attr('src') || default_avatar);
                    set_avatar(id);
                });
            }
            return localStorage.getItem('d_ava' + id);
        };
        var to_replace = {};

        jQuery('#wnotify a[href^="/u"]').each(function() {
            to_replace[jQuery(this).attr('href').substr(2)] = 1;
            jQuery(this).closest('.content').prepend('<a class="lastpost-avatar2 wu' + jQuery(this).attr('href').substr(2) + '" title="' + jQuery(this).text() + '" href="' + jQuery(this).attr("href") + '" alt="no_photo">');
        });

        for (i in to_replace) {
            set_avatar(i);
        };
    };

    jQuery(function() {
        jQuery(function() {
            var NotifyExist = setInterval(function() {
                if (document.getElementById('notif_list') !== null) {
                    var iNewList, iOldList;
                    WidgetNotifications();
                    clearInterval(NotifyExist);
                    iOldList = -1;
                    iNewList = (jQuery('#notif_unread').css('display') == 'none') ? 0 : jQuery('#notif_unread').text().replace(/[^\d]/gi, '');
                    iOldList = iNewList;
                    setInterval(function() {
                        iNewList = (jQuery('#notif_unread').css('display') == 'none') ? -1 : jQuery('#notif_unread').text().replace(/[^\d]/gi, '');
                        if (iNewList !== iOldList) {
                            WidgetNotifications();
                            iOldList = iNewList;
                        }
                    }, 1000);
                }
            }, 1000);
            jQuery('#fa_notifications').click(function() {
                if (jQuery('.fa_tbMainElement.notification').length) {
                    WidgetNotifications();
                };
            });
        });
    });


// Hide Show

$(document).ready(function(){
 $("#RomboText").click(function(){
   $("#wnotify").toggle();
 });
});

Большое спасибо за вашу помощь!

Это HTML. Это немного грязно, потому что я не был создан JS.

<ul id="wnotify">
<li id="n11" class="unread" style="display: list-item;">
<div class="content">
<a class="lastpost-avatar2 wu2" title="Free Trial User" href="/u2" alt="no_photo">
<img class="avt-wid" alt="no_photo" src="https://www.enkouacademy.com/users/3511/42/03/64/avatars/2-8.jpg">
</a>
<div class="contentText ellipsis">
<a href="/u2">Free Trial User</a> wrote a message 
<a href="/t3p25-aloha-ohana?nid=11#53">in a watched topic</a>
</div>
<a class="delete" href="#"></a>
</div>
</li>
<li id="n12" class="unread" style="display: list-item;">
<div class="content">
<a class="lastpost-avatar2 wu2" title="Free Trial User" href="/u2" alt="no_photo">
<img class="avt-wid" alt="no_photo" src="https://www.enkouacademy.com/users/3511/42/03/64/avatars/2-8.jpg">
</a><hr>
<div class="contentText ellipsis">
<a href="/u2">Free Trial User</a> wrote a message <a href="/t3p25-aloha-ohana?nid=12#54">in a watched topic</a>
</div>
<a class="delete" href="#"></a>
</div>
</li>
</ul>

El CSS:

/*El Noti del widgets*/

#wnotify li a.delete {
background: transparent url(https://2img.net/i/fa/i/toolbar/toolbar.png) no-repeat -274px 50%;
float: right;
height: 2.4em;
width: 22px;
}

#wnotify {
display: none;
list-style: outside none none;
background-color: #fff;
padding: 10px !important;
border-bottom: 1px solid rgba(0,0,0,0.1);
border-left: 1px solid rgba(0,0,0,0.1);
border-right: 1px solid rgba(0,0,0,0.1);
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
min-width: 230px;
max-width: 230px;
margin-left: -62px;
}

#wnotify .ellipsis {
min-height: 42px;
overflow: auto;
text-overflow: unset;
white-space: normal;
width: auto;
}

#wnotify .see_all {
border: 1px solid #d2d2d2;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.07);
margin-top: 5px;
padding: 5px;
text-align: center;
}

#wnotify li.unread {
background-color: #fee;
padding: 3px 0px 0px 0px;
font-weight: bold;
}

#wnotify .content {
  width: 100%;
  display: flex;
}

#wnotify .contentText.ellipsis {
    margin-top: 4px;
    margin-bottom: -4px;
}

#wnotify .content > hr {
display: none;
}

.lastpost-avatar2 {
float: left;
padding: 2px;
}

.lastpost-avatar2 img {
background: none repeat scroll 0 0 #fff;
border: 1px solid #d8d8d8;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
float: left;
height: 28px;
margin-right: 5px;
padding: 2px;
width: 28px;
object-fit: cover;
}

Код JS, который я показал перед ходами исходный код уведомления, который по умолчанию предоставляется на веб-сайте Forumotion, в новом месте. Вот оригинальный код JS:

https://illiweb.com/rs3/66/frm/jquery/toolbar/FAToolbar.js