工时记录应用删除Div按钮功能失效问题求助

你的删除按钮失效主要有两个核心问题，直接修正就能解决：

1. HTML按钮的点击绑定错误 #

删除按钮的onclick属性只写了函数名deleteWorktime，没有触发函数调用，必须加上括号才会执行：

<button id="deletebutton" onclick="deleteWorktime()">Arbeitszeiten löschen</button>

2. 删除函数逻辑完全偏离需求 #

原来的deleteWorktime函数没有直接执行清空操作，反而给工时容器绑定了点击事件——这意味着只有点击工时列表区域才会删除容器，完全不符合“点击删除按钮清空所有工时”的需求，而且每次点击删除按钮还会重复绑定事件，导致后续操作异常。

正确的逻辑应该是：点击删除按钮时，清空工时容器的内容，同时更新localStorage里的存储数据（不然刷新后数据又会恢复）。注意不要直接删除myWorkingHours容器，否则后续添加工时会失去挂载节点。

修正后的JS代码：

// 显式获取DOM元素，避免依赖全局作用域
const myWorkingHours = document.getElementById('myWorkingHours');
const myDate = document.getElementById('myDate');
const myStartTime = document.getElementById('myStartTime');
const myEndTime = document.getElementById('myEndTime');

// 初始化加载本地存储的工时数据
myWorkingHours.innerHTML = localStorage.getItem('html') || '';

function deleteWorktime() {
  // 清空容器内容
  myWorkingHours.innerHTML = '';
  // 更新localStorage，同步清空存储的HTML
  localStorage.setItem('html', '');
}

function addWorktime() {
  let currentDate = myDate.value;
  let startTime = myStartTime.value;
  let endTime = myEndTime.value;

  // 校验输入完整性，避免添加空条目
  if (!currentDate || !startTime || !endTime) return;

  myWorkingHours.innerHTML +=
    `<div class="list-item">
    <img class="small-img" src="img/Uhr.png">
    ${currentDate} ${startTime} - ${endTime} 
    </div>`;

  localStorage.setItem('html', myWorkingHours.innerHTML);
  
  // 清空输入框，提升操作体验
  myDate.value = '';
  myStartTime.value = '';
  myEndTime.value = '';
}

额外优化点：

• 显式获取DOM元素，避免隐式全局变量引发的问题
• 添加输入校验，防止空工时条目被保存
• 添加输入框清空逻辑，提升用户操作流畅度

完整修正后的代码片段 #

HTML #

<h1>Arbeitszeiten</h1>
<input id="myDate" placeholder="Datum einfügen" type="date">
<input id="myStartTime" placeholder="Startzeit einfügen" type="time">
<input id="myEndTime" placeholder="Endzeit einfügen" type="time">
<button id="addbutton" onclick="addWorktime()">Speichern</button>
<button id="deletebutton" onclick="deleteWorktime()">Arbeitszeiten löschen</button>
<div id="myWorkingHours">
</div>

CSS（无需修改） #

body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background-color: white;
  font-family: "Roboto";
}

#addbutton {
  background-color: rgb(7, 158, 240);
  color: white;
  border: none;
  font-size: 20px;
  padding: 16px;
  cursor: pointer;
}

#deletebutton {
  background-color: red;
  color: white;
  border: none;
  font-size: 20px;
  padding: 16px;
  cursor: pointer;
}

input {
  border: 1px solid rgba(0, 0, 0, 0.12);
  height: 50px;
  border-radius: 8px;
  width: calc(100% - 16px);
}

.list-item {
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.12);
  padding: 16px;
  border-radius: 8px;
  font-weight: 60;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.small-img {
  width: 24px;
  height: 24px;
}

内容的提问来源于stack exchange，提问作者Rudi Sabri