下面是一个列表,点击哪一项,哪一项删除。 提示: 1. 给 ul 注册点击事件,然后利用事件对象的 target 来找到当前点击的 li,因为点击 li,事件会冒泡到 ul 上, ul 有注册事件,就会触发事件监听器。 2. e.target 这个可以得到我们点击的对象
时间: 2023-07-15 20:10:12 浏览: 78
列表控件点击删除操作
好的,这是一个比较常见的需求,下面是一个示例代码,希望可以帮到您:
HTML:
```html
<ul id="list">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
<li>第五项</li>
</ul>
```
JavaScript:
```javascript
const list = document.getElementById('list');
list.addEventListener('click', (e) => {
const target = e.target;
if (target.tagName.toLowerCase() === 'li') {
target.parentNode.removeChild(target);
}
});
```
这段代码中,我们给 `ul` 注册了一个点击事件监听器,当用户点击 `li` 时,会触发该事件监听器。在事件处理函数中,我们通过 `e.target` 得到当前被点击的对象,然后判断该对象是否为 `li` 元素。如果是 `li` 元素,就调用 `parentNode.removeChild()` 方法,将该元素从 `ul` 中删除。
阅读全文