代码
提交代码
<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');
listEle.addEventListener('click', function(e) {
var el = e.target;
if (el.className === 'delete') {
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);
}
});
</script>
运行结果