JS实现清除输入框值功能代码失效该如何排查解决？

问题根因 #

• 事件绑定失效：添加按钮的点击回调中，先把删除按钮插入列表后，直接对list.innerHTML赋值拼接内容，会重绘列表下所有子节点，之前绑定在删除按钮上的点击事件会直接丢失。
• 逻辑不匹配：当前删除按钮的点击事件仅实现了删除自身的逻辑，没有写入清空输入框值的相关代码。
• HTML语法不规范：id = close未加引号，部分浏览器可能无法正确识别该id属性。

修正方案 #

1. 修正HTML代码 #

首先调整id的写法：

<body>
    <div class="container">
        <div class="bg-image"></div>
        <h2 class="heading">Einkaufsliste</h2>
        <input type="text" placeholder="Materialien" onfocus="this.value=''" class="input-materialien">
        <button type="button" class="button">Hinzufügen</button>
        <div class="saved-list"></div>
        
        <a href="#" id="close">
            <i class = "fas fa-times"></i>
        </a>
    </div>
    <script src="funktion.js"></script>
</body>

2. 修正JS代码 #

将innerHTML拼接改为文本节点插入，同时修改删除按钮的点击逻辑，实现清空输入框的功能：

const input = document.querySelector('.input-materialien')
const list = document.querySelector('.saved-list')
const button = document.querySelector('.button')
const delette = document.getElementById('close')

button.addEventListener('click', () => {
    // 用文本节点插入内容，不会破坏已有DOM的事件绑定
    const textNode = document.createTextNode(input.value)
    list.appendChild(delette)
    list.appendChild(textNode)
    list.appendChild(document.createElement('br'))
})

delette.addEventListener('click', (e) => {
  // 阻止a标签默认跳转行为
  e.preventDefault()
  // 清空输入框值
  input.value = ''
  // 如果需要同时移除删除按钮本身可以保留下面一行，不需要直接删除即可
  // delette.remove()
})

如果你的需求是每一条新增的列表项都自带独立的删除按钮，点击删除对应列表项，可以用下面的JS代码：

const input = document.querySelector('.input-materialien')
const list = document.querySelector('.saved-list')
const button = document.querySelector('.button')

button.addEventListener('click', () => {
    // 空内容不添加
    if (!input.value.trim()) return
    // 新建当前项的容器
    const itemBox = document.createElement('div')
    // 新建当前项对应的删除按钮
    const delBtn = document.createElement('a')
    delBtn.href = '#'
    delBtn.innerHTML = '<i class = "fas fa-times"></i>'
    // 绑定当前项的删除事件
    delBtn.addEventListener('click', (e) => {
        e.preventDefault()
        itemBox.remove()
    })
    const textNode = document.createTextNode(input.value)
    itemBox.appendChild(delBtn)
    itemBox.appendChild(textNode)
    list.appendChild(itemBox)
    // 添加完成后清空输入框
    input.value = ''
})

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