Javascript 简单易懂：关于添加“的问题；无”；当列表为空时，或在至少添加一项时将其删除。更好的解决方案是什么？

我正在努力正确管理文本节点为“None”的元素

这段代码的主要问题是，在我添加新项目后，没有删除文本节点为“None”的初始元素。预期的行为是使用此“None”元素加载页面。当用户添加至少1项，然后删除。如果列表为空，则再次显示“无”

最好的解决方法是什么

更新： 现在，代码片段正在正常运行。只是为了更好地说明：如果您运行此代码，它一开始工作正常。但当我清理所有项目时，其他项目上方仍然显示“无”

let input=document.querySelector（“#userInput”），
按钮=document.querySelector（#buttonInput”），
ul=文件查询选择器（“ul”），
allLi=document.queryselectoral（“ul-li”）；
函数inputLength（）{
返回input.value.length；
}
函数insertMessageIfListEmpty（）{
if（ul.children的类型[0]=“未定义”）{
var li=document.createElement（“li”）；
li.appendChild（document.createTextNode（“无”）；
ul.儿童（li）；
}
}
函数createListElement（）{
设li=document.createElement（“li”）；
appendChild（document.createTextNode（input.value））；
ul.儿童（li）；
input.value=“”；
尼康（li）；
if（allLi[0].innerHTML==“无”）{
allLi[0]。删除（）；
}
}
函数createDeleteButtonCon（项）{
设i=document.createElement（“i”），
span=document.createElement（“span”）；
i、 innerHTML=“×”；
i、 classList.add（“iconX”）；
span.儿童（i）；
项目.子项目（span）；
增列要素（项目）；
}
函数deleteNodeOnClick（e）{
如果（e.target.tagName==“I”）{
e、 target.parentNode.parentNode.remove（）；
}
insertMessageIfListEmpty（）；
}
函数addListAfterClick（）{
如果（inputLength（）>0）{
createListElement（）；
}
}
函数addListAfterKeyDown（事件）{
如果（inputLength（）>0&&event.which==13）{//13字符码：输入
createListElement（）；
}
}
函数addeventdeletparent（elem）{
元素addEventListener（“单击”，删除节点单击）；
}
input.addEventListener（“keydown”，addListAfterKeyDown）；
按钮。addEventListener（“单击”，addListAfterClick）
.iconX{
字体：normal.7em arial；
左边距：10px；
填充：0 12px；
边界半径：4px；
背景色：#ff0030；
颜色：#fff；
光标：指针；
}
待办事项列表-重要任务
添加

没有
对于未来的问题，请将共享代码仅限于相关部分

我希望以下是您的目标：

 /**
 * [someFunction description]
 * @param  ul [the target ul]
 * @param   li [the new li element]
 * @return  ul
 */
function populateUl(ul, li) {
    //check if li is only holding the 'none' li
    let ulContent = ul.getElementsByTagName("li")
    if (ulContent.length == 1 && ulContent[0].textcontent) {
        ul.innerHTML = "";
    }
    ul.appendChild(li);
    return ul;
}

为什么只有两个功能可以实现这些功能：


addItem（itemText，addDelBtn）
：将项目添加到待办事项列表的函数。它接受两个论点：

itemText
：将要添加的项目中显示的文本。此参数主要用于页面加载，以便添加文本为
None
的项目，以及当待办事项列表再次变为空时
addDelBtn
：用于查看是否应添加删除
按钮
（在项目中）的标志。主要是，当添加一个普通项目时（按下add item
按钮后），此参数等于
true
；当添加带有
无
文本的项目时，此参数等于
false


deleteItem（e）
：从待办事项列表中删除项目的函数。

e
：单击事件，用于获取为将其从待办事项列表中删除而按下的删除按钮的父项


主要功能：


如果
输入的
文本不是空的（在修剪文本后），则会根据该文本添加一个项目

写入
输入
并按下添加项目
按钮
后添加的项目有一个
按钮
，用于从待办事项列表中删除该项目
如果删除项目或页面加载后待办事项列表为空/变为空，则会自动添加带有
None
文本的项目。此项目没有“删除<代码>按钮”

，当按下“添加项目<代码>按钮”后添加新项目时，它将被删除

如果待办事项列表为空且将添加新项目，则

None

项目将自动删除，并且该新项目将成为待办事项列表中的第一个项目

可以随时使用上述相同的逻辑添加项

另一点，由于我们必须动态创建元素（delete

按钮和
li
s），我创建了一个函数，该函数根据元素的标记名创建元素（
li
，
按钮
…）

因此，这里是一个演示，它包含了大量有用的注释，可以帮助您阅读代码


/**
*@const input根据其值创建项目的“输入”。
*@const按钮添加新项目的按钮。
*@const ul是待办事项列表。
*@const createElement（标记名，选项）创建并返回元素的函数。
@参数标记名元素的标记名。
@param options保存该元素的属性和/或事件的对象。
*@const deleteItem（e）从待办事项列表中删除元素的函数。
@参数化事件（主要是单击事件）。
*@const addItem（itemText，addDelBtn）将新项目添加到待办事项列表的函数。
@param itemText该项的文本（如果未指定，则使用输入值）
@param addDelBtn用于查看是否应将删除按钮添加到新项的布尔标志。
**/
常量输入=document.getElementById（“userInput”），
button=document.getEl