JS待办列表新增空/空白内容时li样式错乱，如何自动填充'empty'文本

要实现你要的效果，只需要修改add函数即可，同时还会修复你现有代码中重复添加关闭按钮的隐含问题：

具体修改逻辑 #

1. 对输入框获取的内容做首尾空白去除处理
2. 若处理后内容为空，则替换为'empty'再插入条目
3. 删除add函数中冗余的关闭按钮创建代码，避免单个条目生成两个关闭按钮导致样式错乱

修改后的完整add函数代码 #

//add another list item
function add(){
    var listitem = document.createElement("LI");
    listitem.className="todo-item";
    
    var rawInput = document.getElementById('todoinput').value;
    // 空白判断逻辑
    var showText = rawInput.trim() === '' ? 'empty' : rawInput;
    
    var myul = document.getElementById('todo-list');
    var t = document.createTextNode(showText);
    listitem.appendChild(t);
    myul.appendChild(listitem);

    addclosebutton(listitem);
    listitem.addEventListener('click',check);
    // 可选：添加完成后清空输入框，优化使用体验
    document.getElementById('todoinput').value = '';
}

修改后即可实现：输入内容全为空白时自动填充empty文本，不会再出现样式错乱问题，关闭按钮也会正常显示。

内容的提问来源于stack exchange，提问作者Anđelo Motika