使用JavaScript prompt方法实现购物清单新增、校验及删除功能

替换你原有grocery.js的全部内容即可正常运行：

var elList, addLink, counter;      // 声明变量
var $ = function(id) { return document.getElementById(id); };
elList  = $('list');               // 获取ul列表                   
addLink = $('add');                // 获取新增按钮
counter = $('counter');            // 获取计数元素

// 更新计数函数
function updateCount() {           
  var listItems = elList.getElementsByTagName('li').length;
  counter.innerHTML = listItems;
}

// 检测条目是否已存在
function isItemExists(newItem) {
  var items = elList.getElementsByTagName('li');
  for (var i = 0; i < items.length; i++) {
    // 提取条目标题，去掉末尾的Delete文本，统一转小写对比
    var existItem = items[i].innerText.replace('Delete', '').trim().toLowerCase();
    if (existItem === newItem.trim().toLowerCase()) {
      return true;
    }
  }
  return false;
}

// 新增条目函数
function addItem(e) {
  e.preventDefault(); // 阻止a标签默认跳转行为
  var newItem = prompt("请输入要添加的食品名称：");
  // 处理用户取消输入或输入为空的边界情况
  if (newItem === null || newItem.trim() === '') {
    alert("未输入有效内容，请重新尝试！");
    return;
  }
  // 重复检测
  if (isItemExists(newItem)) {
    alert("该条目已存在于购物清单中！");
    return;
  }
  // 创建符合原有HTML结构的li元素，自带删除按钮
  var li = document.createElement('li');
  li.innerHTML = `${newItem.trim()}<a href="#" class="delete">Delete</a>`;
  // 插入到列表末尾
  elList.appendChild(li);
  // 更新计数
  updateCount();
}

// 删除功能：事件委托绑定到ul，适配所有原有+新增的条目
elList.addEventListener('click', function(e) {
  if (e.target.classList.contains('delete')) {
    e.preventDefault();
    e.target.parentNode.remove(); // 删除对应条目
    updateCount();
  }
});

// 绑定新增按钮点击事件
addLink.addEventListener('click', addItem);

// 初始化同步计数
updateCount();

实现说明 #

• 重复检测自动忽略大小写和前后空格，符合通用使用习惯
• 兼容prompt点击取消、输入为空等边界情况，不会出现代码报错
• 新增条目完全匹配原有HTML结构，样式和原生条目完全一致
• 删除功能采用事件委托实现，不需要给每个新增条目单独绑定事件，性能更优
• 新增/删除操作后自动同步顶部计数，不需要手动修改数值

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