慕课在线编辑器

代码提交代码

.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>

deleteEle.forEach(function(el) {
    el.addEventListener('click', function() {
      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>

运行结果