So I've created an index page with bootstrap 4's tab view, and on each tab I've added an span that contains an X, so the user can close the tab.

However when the X is clicked the tab content still shows, I've found afew questions regarding something similar with bootstrap 3 which lead me onto JQuery

```
                <ul class="nav nav-tabs" role="tablist">
                    <li id="dashboardTab" class="nav-item"><a class="nav-link active" id="dashboard-tab" data-toggle="tab" href="#dashboard" role="tab" aria-controls="dashboard" aria-selected="true">Dashboard</a></li>
                    <li id="usersTab" class="nav-item" style="display: none;"><a class="nav-link" id="userCreate-tab" data-toggle="tab" href="#userCreate" role="tab" aria-controls="userCreate" aria-selected="false">Users<span onclick="onCloseTabButtonClick(0)">X</span></a></li>
                </ul> 

```

These are my tabs, nothing special.

```
    function onCloseTabButtonClick(pageNumber) {
        switch (pageNumber) {
            case 0:
                document.getElementById("usersTab").style.display = "none";
                $('#userCreate-tab').on('click', function (event) { event.preventDefault(); });
                break;
        }
    }

```

This is my attempt at stopping the page switch, I'm pretty new to JQuery but from what I understand the `event.preventDefault();` should stop the switch, however it still goes through.

I have tested this by throwing a console.log in there and that fires, so I know my click event does work.

Update
------

I tried to pass the close event to the close tab function

```
        <link href="../Content/site.css" rel="stylesheet"/>
        <link href="../Content/bootstrap.min.css" rel="stylesheet"/>
        <script src="../Scripts/jquery-3.4.1.min.js"></script>
        <script src="../Scripts/bootstrap.min.js"></script>

<script type="text/javascript">
            function onCloseTabButtonClick(event, pageNumber) {
                switch (pageNumber) {
                    case 0:
                        document.getElementById("usersTab").style.display = "none";
                        event.preventDefault();
                        break;
                    case 1:
                }
            }
</script>

            <div id="container-fluid">
                <div class="row">
                    <div class="col-md-12" style="padding-right: 0px;">
                        <ul class="nav nav-tabs" role="tablist">
                            <li id="dashboardTab" class="nav-item"><a class="nav-link active" id="dashboard-tab" data-toggle="tab" href="#dashboard" role="tab" aria-controls="dashboard" aria-selected="true">Dashboard</a></li>
                            <li id="usersTab" class="nav-item" style="display: none;"><a class="nav-link" id="userCreate-tab" data-toggle="tab" href="#userCreate" role="tab" aria-controls="userCreate" aria-selected="false">Users<span onclick="onCloseTabButtonClick(event, 0)">X</span></a></li>
                        </ul>

                        <div class="tab-content">
                            <div id="dashboard" class="tab-pane fade show active" role="tabpanel" aria-labelledby="dashboard-tab">
                               <%-- Dashboard Page--%>
                            </div>
                            <div id="userCreate" class="tab-pane fade" role="tabpanel" aria-labelledby="userCreate-tab">
                                <%--User Page--%>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

```

**UPDATE 2**
Trying to manage the click and hide event with JQuery

```
<script type="text/javascript">
            $("li.nav-item .tabCloser").click(function (e) {
                e.stopPropagation();
                $(this).parent().hide();
                var idHref=$(this).parent().attr("href");
                $(idHref).removeClass("active");
                console.log('JQuery Fired');
            })
</script>

   <ul class="nav nav-tabs" role="tablist">
       <li id="dashboardTab" class="nav-item"><a class="nav-link active" id="dashboard-tab" data-toggle="tab" href="#dashboard" role="tab" aria-controls="dashboard" aria-selected="true">Dashboard</a></li>
       <li id="usersTab" class="nav-item"><a class="nav-link" id="userCreate-tab" data-toggle="tab" href="#userCreate" role="tab" aria-controls="userCreate" aria-selected="false">Users<span class="tabCloser">X</span></a></li>
    </ul>

```