JavaScript 设置列表选项(li)可删除

以下实例我们演示了如何用 JavaScript 来关闭列表选项：

HTML 代码

• Adele
• Agnesx
• Billyx
• Bobx
• Calvinx
• Christinax
• Cindy

CSS 代码

* {

box-sizing: border-box;

}

/* 列表 */

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;

}

/* 鼠标移动过去后增加灰色背景 */

ul li:hover {

background-color: #eee;

}

/* 设置关闭按钮 */

.close {

cursor: pointer;

position: absolute;

top: 50%;

right: 0%;

padding: 12px 16px;

transform: translate(0%, -50%);

}

.close:hover {background: #bbb;}

HTML 代码

/* 取得 class=”close” 的所有元素 */

var closebtns = document.getElementsByClassName(“close”);

var i;

/* 循环元素，在点击时关闭它 */

for (i = 0; i < closebtns.length; i++) {

closebtns[i].addEventListener(“click”, function() {

this.parentElement.style.display = 'none';

});

}