HTML Button Close List Items

Screenshot

SAFAHAD - Tutorial Article: (Indonesian) (English). Press Enter For Results

HTML Button Close List Items

<ul id="myULclose"> <li><a href="javascript:void(0)">Abdul Hamid (Owner,Kontributor,Web Desaigner,Web Building,Content Creator,Writer Content)</a></li> <li><a href="javascript:void(0)">Agnes<span class="closeulb">&times;</span></a></li> <li><a href="javascript:void(0)">Billy<span class="closeulb">&times;</span></a></li> <li><a href="javascript:void(0)">Bob<span class="closeulb">&times;</span></a></li> <li><a href="javascript:void(0)">Calvin<span class="closeulb">&times;</span></a></li> <li><a href="javascript:void(0)">Christina<span class="closeulb">&times;</span></a></li> <li><a href="javascript:void(0)">Cindy</a></li> </ul> <script> var closeULbtns = document.getElementsByClassName("closeulb"); var i; for (i = 0; i < closeULbtns.length; i++) { closeULbtns[i].addEventListener("click", function() { this.parentElement.style.display='none'; }); } </script> <style> #myULclose { list-style-type: none; padding: 0; margin: 0; } #myULclose li a { border: 1px solid #ddd; margin-top: -1px; /* Prevent double borders */ background-color: #f6f6f6; padding: 12px; text-decoration: none; font-size: 17px; color: black; display: block; position: relative; } #myULclose li a:hover:not(.header) { background-color: #eee; } #myULclose .closeulb {position: absolute; top: 50%; right: 0%;padding:12px 16px; transform: translate(0%,-50%);} .closeulb:hover {background:#bbb} </style>
Press Enter For Results