如何实现消费记录APP中带删除按钮的多LI元素UL列表功能

问题根源 #

此前的实现没有将同一条消费的3个字段对应的li归为同一个独立DOM组，删除按钮和待删除元素没有对应关联，才会出现删除错位、误删整个列表的问题。正确实现思路是把单条消费作为独立DOM单元处理，无需修改原有HTML代码，直接调整JS逻辑即可：

完整实现代码 #

// 提前获取全局DOM元素，避免重复查询
const placeInput = document.querySelector('.place');
const dateInput = document.querySelector('.date');
const amountInput = document.querySelector('.amount');
const addBtn = document.querySelector('.addBtn');
const list = document.querySelector('.list');

// 添加消费记录逻辑
function addStuff() {
  const place = placeInput.value.trim();
  const date = dateInput.value.trim();
  const amount = amountInput.value.trim();
  
  // 非空校验，避免添加空记录
  if (!place || !date || !amount) return;

  // 创建单条消费的父容器，整条记录对应这一个li
  const expenseItem = document.createElement('li');
  expenseItem.className = 'expense-item';

  // 创建内部ul，存放3个字段的子li，匹配你要求的每条消费对应3个li的结构
  const fieldList = document.createElement('ul');

  // 分别创建3个字段的子li
  const placeLi = document.createElement('li');
  placeLi.textContent = `消费地点：${place}`;
  const dateLi = document.createElement('li');
  dateLi.textContent = `消费日期：${date}`;
  const amountLi = document.createElement('li');
  amountLi.textContent = `消费金额：${amount}`;

  // 把子li追加到内部ul
  fieldList.append(placeLi, dateLi, amountLi);

  // 创建删除按钮
  const deleteBtn = document.createElement('button');
  deleteBtn.type = 'button';
  deleteBtn.textContent = 'X';
  deleteBtn.addEventListener('click', deleteExpense);

  // 把内部ul和删除按钮都追加到单条记录父容器
  expenseItem.append(fieldList, deleteBtn);
  // 把整条记录追加到全局列表
  list.appendChild(expenseItem);

  // 添加完成后清空输入框
  placeInput.value = '';
  dateInput.value = '';
  amountInput.value = '';
}

// 删除消费记录逻辑
function deleteExpense(e) {
  // 直接定位到当前点击按钮对应的整条消费记录容器，删除即可
  const targetItem = e.target.closest('.expense-item');
  targetItem.remove();
}

// 绑定添加按钮点击事件
addBtn.addEventListener('click', addStuff);

关键逻辑说明 #

• 结构分层：单条消费对应1个顶级li.expense-item，内部嵌套子ul存放3个字段的li，保证整条记录是独立的DOM单元，不会和其他记录混淆
• 删除逻辑精准：通过closest()方法直接定位按钮所属的整条记录容器，无需关心按钮挂载位置，不会出现删除错位的问题
• 新增非空校验和输入框清空逻辑，提升使用体验

内容的提问来源于stack exchange，提问作者Germán