实现双击任务div事件为dblclick可以改变任务的reminder属性并且样式左边的绿色竖线发生变化。实现点击红色x移除该任务。

HTML代码：

<div class="task">
  <div class="task-header">
    <div class="task-title">任务标题</div>
    <div class="task-delete">x</div>
  </div>
  <div class="task-content">任务内容</div>
</div>

CSS代码：

.task {
  border-left: 4px solid #3CB371;
  padding: 10px;
  margin-bottom: 10px;
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.task-title {
  font-weight: bold;
  font-size: 16px;
}

.task-delete {
  color: red;
  font-weight: bold;
  cursor: pointer;
}

.task-content {
  margin-top: 10px;
  font-size: 14px;
}

JavaScript代码：

const tasks = document.querySelectorAll('.task');

tasks.forEach(task => {
  const taskTitle = task.querySelector('.task-title');
  const taskDelete = task.querySelector('.task-delete');

  // 双击任务div
  task.addEventListener('dblclick', () => {
    // 改变reminder属性
    task.classList.toggle('reminder');
    // 样式发生变化
    if (task.classList.contains('reminder')) {
      task.style.borderLeftColor = '#FFA07A';
    } else {
      task.style.borderLeftColor = '#3CB371';
    }
  });

  // 点击红色“x”移除该任务
  taskDelete.addEventListener('click', () => {
    task.remove();
  });
});

注释已经说明了代码的实现。