代码
提交代码
<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>
运行结果