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

eli · 2022-04-19 20:13:45 · 热度: 8

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

HTML 代码

<ul> <li>Adele</li> <li>Agnes<span class="close">x</span></li> <li>Billy<span class="close">x</span></li> <li>Bob<span class="close">x</span></li> <li>Calvin<span class="close">x</span></li> <li>Christina<span class="close">x</span></li> <li>Cindy</li> </ul>

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'; }); }

猜你喜欢:
暂无回复。
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册