点击Div内记录行高亮并实现删除功能的JavaScript问题

你的问题根源在于没有为每条历史记录创建独立的块级容器——原来用<span>+<br>的方式，无法给整行添加选中样式（因为<span>是行内元素，背景色不会填充整行），也没法精准定位到某一条记录进行后续操作。下面是不用jQuery的纯JavaScript实现方案：

1. 调整HTML结构 #

保留原有的history容器，新增一个删除按钮用于删除选中项：

<div id="history" style=""></div>
<button id="deleteSelected">删除选中记录</button>

2. 完善CSS样式 #

给每行记录添加基础样式，同时定义选中状态的高亮效果：

/* 每行记录的基础样式，让点击区域更友好 */
.history-row {
  padding: 6px 8px;
  cursor: pointer;
  margin: 3px 0;
  border-radius: 4px;
}

/* 选中状态的高亮样式 */
.history-row.selected {
  background-color: red;
  color: #fff; /* 可选：让文字更清晰 */
}

3. 重写JavaScript逻辑 #

重构setHistory函数，为每条记录创建独立的<div>容器，并绑定点击选中事件；同时添加删除选中项的逻辑：

// 渲染历史记录的函数
function setHistory() {
  const historyContainer = document.getElementById('history');
  // 先清空容器，避免重复渲染
  historyContainer.innerHTML = '';

  const keys = Object.keys(localStorage);
  // 处理无记录的情况
  if (keys.length === 0) {
    historyContainer.innerHTML = 'No previous data yet :(';
    return;
  }

  // 倒序排序localStorage的key
  const revkeys = keys.sort().reverse();

  // 遍历每个key，创建对应的行元素
  revkeys.forEach(key => {
    const row = document.createElement('div');
    row.className = 'history-row';
    // 填充行内容，保留你原来的布局逻辑
    row.innerHTML = `<span style="float:left;">${key}</span>${localStorage.getItem(key)}`;

    // 绑定点击事件：切换选中状态，且确保同一时间只有一行被选中
    row.addEventListener('click', function() {
      // 移除所有行的选中状态
      document.querySelectorAll('.history-row.selected').forEach(el => {
        el.classList.remove('selected');
      });
      // 切换当前行的选中状态
      this.classList.toggle('selected');
    });

    historyContainer.appendChild(row);
  });
}

// 删除选中记录的函数
function deleteSelectedRecord() {
  const selectedRow = document.querySelector('.history-row.selected');
  if (!selectedRow) {
    alert('请先选中一条要删除的记录');
    return;
  }

  // 从选中行中提取对应的localStorage key（这里假设第一个span的内容就是key）
  const targetKey = selectedRow.querySelector('span').textContent;
  // 删除localStorage中的对应项
  localStorage.removeItem(targetKey);
  // 重新渲染历史记录
  setHistory();
}

// 页面加载完成后初始化渲染历史记录
window.addEventListener('DOMContentLoaded', setHistory);
// 给删除按钮绑定点击事件
document.getElementById('deleteSelected').addEventListener('click', deleteSelectedRecord);

关键改进点说明 #

• 用<div>作为行容器：块级元素可以让背景色覆盖整行，同时每个行都是独立的DOM节点，方便绑定事件和定位；
• 点击事件逻辑：每次点击时先清除其他行的选中状态，确保同一时间只有一行被选中（如果需要支持多选，可以去掉清除其他选中的逻辑）；
• 删除逻辑：从选中行中提取对应的key，操作localStorage后重新渲染记录，保证界面和存储数据同步。

内容的提问来源于stack exchange，提问作者S.J.