代码
提交代码
<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;} .add { border: 1px dashed #4caf50; font-size: 14px; padding: 4px 8px; margin-top: 22px; outline: none; cursor: pointer; } .add:active { color: white; background: #4caf50; } </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> <button class="add">增加一项</button> <script> var listEle = document.querySelector('.list'); listEle.addEventListener('click', function(e) { if (e.target.className === 'delete') { var el = e.target; console.log('开始删除...'); el.setAttribute('disabled', 'disabled'); el.style.color = 'rgb(226, 174, 174)'; el.style.borderColor = 'rgb(226, 174, 174)'; el.style.cursor = 'wait'; el.innerHTML = '处理中...'; setTimeout(function() { var itemEl = el.parentNode.parentNode; listEle.removeChild(itemEl); console.log('删除成功'); }, 1500); } }); document.querySelector('.add').addEventListener('click', function() { var el = document.createElement('div'); el.className = 'item'; el.innerHTML = [ '<div class="content">', '学习', '</div>', '<div class="operates">', '<button class="delete">删除</button>', '</div>', ].join(''); listEle.appendChild(el); }); </script>
运行结果