回到首页
个人中心
反馈问题
注册登录
下载APP
代码
提交代码
<style> .list .item {display: flex;justify-content: space-between;border-bottom: 1px dashed #4caf50;padding: 8px 0;} .list .item .caption {font-weight: 700;} .list .item .operates .delete {border: 1px solid rgb(177, 107, 107);color: rgb(207, 72, 72);outline: none;cursor: pointer;} </style> <div class="list"> <div class="item"> <div class="content caption"> 今天要做的事情 </div> <div class="operates caption"> 操作 </div> </div> <div class="item"> <div class="content"> 吃火锅 </div> <div class="operates"> <button class="delete">删除</button> </div> </div> <div class="item"> <div class="content"> 和小姐姐聊天 </div> <div class="operates"> <button class="delete">删除</button> </div> </div> </div> <script> var listEle = document.querySelector('.list'); var deleteEle = document.querySelectorAll('.delete'); deleteEle.forEach(function(el) { el.addEventListener('click', function() { console.log('开始删除...'); setTimeout(function() { var itemEl = el.parentNode.parentNode; listEle.removeChild(itemEl); console.log('删除成功'); }, 1500); }); }); </script>
运行结果