Scrollspy methods in Bootstrap

How to remove the navigation content for which the link was clicked using scrollspy method in bootstrap

Scrollspy with methods

We use .scrollspy(refresh) to remove the link when the link in the list value of the navigation element, this method is used to refresh the content

<style>
        body {
            position: relative;
        }

        #dnf {
            padding-top: 40px;
            height: 300px;
            color: #fff;
            background-color: red;
        }

        #tec {
            padding-top: 40px;
            height: 300px;
            color: #fff;
            background-color: black;
        }

        #child {
            padding-top: 40px;
            height: 300px;
            color: #fff;
            background-color: orange;
        }

        #on {
            padding-top: 40px;
            height: 300px;
            color: #fff;
            background-color: pink;
        }

        #off{
            padding-top: 40px;
            height: 300px;
            color: #fff;
            background-color:green;
        }
    </style>

    <script>
        $(document).ready(function () {
            removeSection = function (e) {
                $(e).parents("body > div").remove();
                $('body').each(function () {
                    $(this).scrollspy('refresh');
                });
            };
            $("body").scrollspy({ target: ".navbar"});
        });
    </script>

</head>
<body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                       <span class="sr-only">Toggle Navigation</span>
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">SN ITFunda</a>
            </div>
            <div>
                <div class="collapse navbar-collapse" id="myNavbar">
                    <ul class="nav navbar-nav">
                        <li><a href="#dnf">DotNetFunda</a></li>
                        <li><a href="#tec">TechFunda</a></li>
                        <li><a href="#child">KidsFunda</a></li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">ITFunda <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#on">Online training</a></li>
                                <li><a href="#off">Offline training</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>

    <div id="dnf" class="container-fluid">
        <h1>DotNetFunda <a href="#" onclick="removeSection(this);">&times; Close</a></h1>
        <p> DotNetFunda.Com is a popular online tutorials and guide for latest Microsoft® technologies aimed for beginners and intermediate level professionals. We help beginners to become intermediate level professionals and help intermediate level professionals to become an expert. By following our different sections regularly, we hope you will soon become one of the 'Most Valuable' professional and start shining in your career.</p>
    </div>
    <div id="tec" class="container-fluid">
        <h1>TechFunda <a href="#" onclick="removeSection(this);">&times; Close</a></h1>
        <p>TechFunda is a free How to web technologies tutorials website. Enjoy your learning in How to manner that are based on real time problem solutions. If you have a how to problem to ask, please ask here. If you have a how to problem to ask, please ask here.TechFunda is a free How to web technologies tutorials website. Enjoy your learning in How to manner that are based on real time problem solutions. If you have a how to problem to ask, please ask here. If you have a how to problem to ask, please ask here.TechFunda is a free How to web technologies tutorials website. Enjoy your learning in How to manner that are based on real time problem solutions. If you have a how to problem to ask, please ask here. </p>
    </div>
    <div id="child" class="container-fluid">
        <h1>KidsFunda <a href="#" onclick="removeSection(this);">&times; Close</a></h1>
        <p>KidsFunda is a online website which makes kids entertain by playing games, watching videos, drawing paints, etc  KidsFunda is a online website which makes kids entertain by playing games, watching videos, drawing paints, etc  KidsFunda is a online website which makes kids entertain by playing games, watching videos, drawing paints, etc  KidsFunda is a online website which makes kids entertain by playing games, watching videos, drawing paints, etc  KidsFunda is a online website which makes kids entertain by playing games, watching videos, drawing paints, etc    </p>
    </div>
    <div id="on" class="container-fluid">
        <h1>Online training <a href="#" onclick="removeSection(this);">&times; Close</a></h1>
       <p>ITFunda provides online training for the people who needs online training  ITFunda provides online training for the people who needs online training  ITFunda provides online training for the people who needs online training  ITFunda provides online training for the people who needs online training  ITFunda provides online training for the people who needs online training ITFunda provides online training for the people who needs online training</p>
    </div>
    <div id="off" class="container-fluid">
        <h1>Offline training<a href="#" onclick="removeSection(this);">&times; Close</a></h1>
        <p> ITFunda provides Offline training for the people whoe needs class room training   ITFunda provides Offline training for the people whoe needs class room training   ITFunda provides Offline training for the people whoe needs class room training   ITFunda provides Offline training for the people whoe needs class room training   ITFunda provides Offline training for the people whoe needs class room training   ITFunda provides Offline training for the people whoe needs class room training</p>
    </div>
</body>

In the above code snippet we have defined how to remove the link using scrollspy function using javascript events
In the body section of the html page we have nav element with navbar navbar-inverse navbar-fixed-top
In the next line of the nav element we have the div section with class value container-fluid and we have another div with class value as navbar-header which describes the elements of the navbar header section
In the next line we created button in the navbar-header with class value as navbar-toggle and data-toggle as collapse and we have given the data-target as #mynavbar
In the next line we have the anchor <a> tag with class value navbar-brand with value as SN ITFunda
In the next line of the nav element we have the div section with class value as collapse navbar-collapse with id as mynavbar which calls the function of the nav element in the div section and we created the list values in the <ul> element with class value as nav navbar-nav with values as DotNetFunda, TechFunda and KidsFunda with their id values as #dnf,#tec, #child
In the next line we have created dropdown list values using <li> element with class value as dropdown and we have the anchor tag with class dropdown-toggle and data-toggle as dropdown and we have the <ul> element with dropdown values as Online training and Offline training
In the next line we have the div section to call the description of the list value by giving the id of the list value, we have given the onclick function of the script function to close the value
In the head section of the html we have the style and script function, we have defined the style of the of the list values by giving height, padding-top, color, background-color
In the script function of the html we have used jQuery function
We have as removeSection = function (e) -It defines as function remove section
$(e).parents("body > div").remove(); -It defines as function (e) body element greater than div section, it removes the function
$('body').each(function () { $(this).scrollspy('refresh');}); - It defines as body of each function to scroll and scrollspy('refresh') removes the function of the list value
$("body").scrollspy({ target: ".navbar"});- It defines the body function of scrollspy to scroll with target as navbar which calls the nev element