After removing one item from my list, the total count is not being updated. How can I update the total number of items in the list after removing one?
var totalList = document.getElementById('total');
var deleteBtn = document.getElementsByClassName('delete');
var allList = document.querySelectorAll(".navbar-nav li");
var removeNotify = function(e) {
e.preventDefault();
var notifyItem = $(e.delegateTarget).parent();
var html = $('html');
html.css('overflowX', 'hidden');
notifyItem.addClass(notifyItem.data('animation-class'));
notifyItem.bind('oanimationend animationend webkitAnimationEnd', function() {
notifyItem.remove();
html.removeAttr('style');
});
};
$(function() {
$('.delete').on('click', removeNotify);
console.log(allList.length - 1);
});
// total li
var myList = document.getElementById('myList');
$('.delete').on('click', 'li', function(ev){
totalList.innerHTML = allList.length - 1
});.navbar-expand-lg .navbar-nav {
-ms-flex-direction: column;
flex-direction: column;
}
.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}
.nav-scroller .nav {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.nav-item {
text-align: left;
padding-left: 2rem;
border-bottom: 1px solid #252629;
padding: 1rem 2rem;
position: relative;
-webkit-transition: .1s all ease-in-out;
transition: .1s all ease-in-out;
}
.navbar-nav .title {
font-family: "Monda-Regular", sans-serif;
line-height: 1.75rem;
letter-spacing: .05rem;
}
.nav-item:hover:not(:first-child){
background-color: #4362B1;
}
.nav-item:hover p,
.nav-item:hover .date {
color: #E1E2E2;
}
.nav-item .delete {
display: block;
width: 16px;
height: 16px;
line-height: 15px;
font-weight: bolder;
position: absolute;
top: 10px;
right: 10px;
border-radius: 50%;
cursor: pointer;
background-color: #637cbb;
visibility: hidden;
-webkit-transition: .1s all ease-in-out;
transition: .1s all ease-in-out;
}
.nav-item:hover .delete {
visibility: visible;
}
/*li animation on delete*/
@-webkit-keyframes minimize {
0% {
max-height: 10rem;
padding-top: 1rem;
padding-bottom: 1rem;
border-width: 1px;
overflow: hidden;
}
100% {
max-height: 0;
padding-top: 0;
padding-bottom: 0;
border-width: 0;
overflow: hidden;
}
}
@keyframes minimize {
0% {
max-height: 10rem;
padding-top: 1rem;
padding-bottom: 1rem;
border-width: 1px;
overflow: hidden;
}
100% {
max-height: 0;
padding-top: 0;
padding-bottom: 0;
border-width: 0;
overflow: hidden;
}
}
.navbar-nav li.minimize {
-webkit-animation-duration: .5s;
animation-duration: .5s;
animation-iteration: 1;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.navbar-nav li.minimize {
-webkit-animation-name: minimize;
animation-name: minimize;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="notifyNum align-center d-flex justify-content-center align-items-center mr-auto">
<span id="total" class="fontSize12"></span>
</div>
<ul id="myList" class="navbar-nav w-100 align-left">
<li class="nav-item title">
<h1 class="p-0 m-0 weight700 fontSize20 gray6">Notifications</h1>
</li>
<li id="1" class="nav-item" data-animation-class="minimize">
<h2 class="notifyTitle weight600 fontSize16 gray5 mb-2">test-1 </h2>
<span class="delete text-center">×</span>
</li>
<li id="2" class="nav-item" data-animation-class="minimize">
<h2 class="notifyTitle weight600 fontSize16 gray5 mb-2">test-2 </h2>
<span class="delete text-center">×</span>
</li>
<li id="3" class="nav-item" data-animation-class="minimize">
<h2 class="notifyTitle weight600 fontSize16 gray5 mb-2">test-3 </h2>
<span class="delete text-center">×</span>
</li>
</ul>I've been trying to update the total count of my lists and display it in a div using the following code, but it's not working:
var myList = document.getElementById('myList');
$('.delete').on('click', 'li', function(ev){
totalList.innerHTML = allList.length - 1
});