购物清单Todo App：点击提交按钮后列表项短暂显示随即消失求助

核心原因 #

你的Submit按钮嵌套在<form>标签内，浏览器默认会把未指定type的按钮识别为submit类型，点击后会触发表单的默认提交行为——页面重新加载，刚创建的列表项会随着页面刷新消失。

解决方法（二选一即可） #

方法1：阻止表单默认提交行为

在按钮的点击事件里添加event.preventDefault()，取消浏览器的默认提交动作：

button.addEventListener('click',(e)=>{
  e.preventDefault(); // 关键代码：阻止表单提交刷新页面
  const myData = input.value
  input.value = ''

  const newdiv = document.createElement('div')
  newdiv.classList.add('newdiv'); 

  const listInput = document.createElement('li')
  const textdata = document.createElement('span')
  textdata.textContent = myData;
  const delButton = document.createElement('button')
  delButton.textContent = 'delete';
  
  listInput.appendChild(textdata)
  newdiv.appendChild(listInput)
  newdiv.appendChild(delButton)
  list.appendChild(newdiv)

  delButton.addEventListener('click',()=>{
    newdiv.remove(); // 修正删除逻辑：直接删除条目容器
  })
})

方法2：修改按钮类型为普通按钮

直接在HTML的按钮标签上指定type="button"，让它不再触发表单提交：

<button type="button">Submit</button>

额外小修正 #

原删除按钮逻辑存在错误：list.removeChild(listInput)中的listInput并不是list的直接子元素（newdiv才是），导致删除动作无法生效。改成newdiv.remove()可以直接删除整个条目容器，逻辑更简洁准确。

内容的提问来源于stack exchange，提问作者denis kiplangat