The notification using
<span class="close">×</span><span class="close">×</span>Any suggestions on how to resolve this issue?
var closebtns = document.getElementsByClassName("close");
var i;
for (i = 0; i < closebtns.length; i++) {
closebtns[i].addEventListener("click", function() {
alert("X was clicked");
});
} body {font-family: sans-serif;}
input { font-size: 1em; } /* prevent zoom in mobile */
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
ul li {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block;
position: relative;
min-height: 1em;
z-index: 999;
max-width: 360px;
}
ul li:hover {
background-color: #eee;
}
/* sortable plugin styles when dragged */
.dragged {
position: absolute;
opacity: 0.5;
z-index: 2000;
}
li.placeholder {
position: relative;
background: purple;
}
.close {
cursor: pointer;
position: absolute;
top: 50%;
right: 0%;
padding: 12px 16px;
transform: translate(0%, -50%);
z-index: 99999;
}
.close:hover {background: #bbb;}<div id="sort-it">
<ul>
<li>This is item #1<span class="close">×</span></li>
<li>This is item #2<span class="close">×</span></li>
<li>This is item #3<span class="close">×</span></li>
<li>This is item #4<span class="close">×</span></li>
<li>This is item #5<span class="close">×</span></li>
</ul>
</div>