Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        document.addEventListener('DOMContentLoaded', function(event){
            clean(document.body);

            let _links = this.getElementsByClassName("list-group-item");
            for (let i = 0; i < _links.length; i++) {
                _links[i].addEventListener("click", function(){

                    this.childNodes[1].style['display'] = 'none';
                    // alert(this.childNodes[1].data);

                    let _counter = document.getElementsByClassName("badge");
                    let _chislo = parseInt(_counter[0].innerHTML) - 1;
                    if(_chislo > -1){
                        if(this.style['font-weight'] != "normal"){
                            _counter[0].innerHTML = _chislo;
                            this.style['font-weight'] = "normal";
                        }
                    }
                });
            }


        });
        function clean(node)
        {
          for(var n = 0; n < node.childNodes.length; n ++)
         {
           var child = node.childNodes[n];
           if
           (
             child.nodeType === 8
             ||
             (child.nodeType === 3 && !/\S/.test(child.nodeValue))
           )
           {
             node.removeChild(child);
             n --;
           }
           else if(child.nodeType === 1)
           {
             clean(child);
           }
         }
       }
    </script>
</head>
<body>
    <div class="container" style="margin-top:20px;margin-bottom:20px" id="ladder">
        <ul class="nav nav-pills">
            <li> <a class="nav-item">Messages <span class="badge bg-primary text-white">4</span></a> </li>
        </ul>
        <ul class="list-group table-of-contents">
            <a class="list-group-item" href="#navbar" style="font-weight:bold;">Ново съобщение <span class="badge bg-info text-white"> alert </span></a>
            <a class="list-group-item" href="#buttons" style="font-weight:bold;">Ново съобщение <span class="badge bg-info  text-white"> alert </span></a>
            <a class="list-group-item" href="#typography" style="font-weight:bold;">Ново съобщение <span class="badge bg-info  text-white"> alert </span></a>
            <a class="list-group-item" href="#tables" style="font-weight:bold;">Ново съобщение <span class="badge bg-info  text-white"> alert </span>
            </a>
        </ul>
    </div>

</body>
</html>