Remove ACTIVE class from nav-link element in Bootstrap 4 - php

Question

I need to remove the ACTIVE class from nav-item when the user closes the tab. I try to build tabs with text content inside. Tabs should be closed by default when the user opens the page. When the user clicks on a tab to open it, it should change the color to blue (So here I can use the active class to add style), but when it closes, it should change the color to white. The best way would be to remove the ACTIVE class from li and I stuck here. How to do it? Unfortunately Bootstrap does not remove the ACTIVE class when I click on the tab to close it. Bootstrap removes the ACTIVE class only when I switch between tabs.
Here is my HTML:
<div class="col-md-12">
<ul class="nav nav-tabs justify-content-center" role="tablist">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#one" role="tab">One</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#two" role="tab">Two</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#three" role="tab">Three</a>
</li>
</ul>
<div class="tab-content">
<div class="text-center tab-pane" id="one" role="tabpanel">1 tab content</div>
<div class="text-center tab-pane" id="two" role="tabpanel">2 tab Content</div>
<div class="text-center tab-pane" id="three" role="tabpanel">3 tab content</div>
</div>
</div>
And here is my JS:
jQuery(function ($) {
$(".nav-link").click(function(){
if ($(this).hasClass('active')){
$('#' + this.hash.substr(1).toLowerCase()).toggleClass('active');
}
});
});

Answer 1

Just go over all the nav-item's and remove the class when the user closes the tab
$('.your-close-icon').on('click', function() {
$('.nav-item').removeClass('active');
});