Javascript - 空节点问题

Question

我正在学习如何使用节点，但遇到了一个小问题，然后我不知道为什么它不起作用。

https://jsfiddle.net/Lrzy0263/

HTML

 <input type="text" id="couleur"> 
 <button id="ajouter">Ajouter</button>
 <ul id="liste"></ul>

Javascript

document.getElementById("ajouter").addEventListener('click',
    function (){
        var couleur = document.getElementById("couleur").value;
        var li = document.createElement("li");
        var texte =       document.createTextNode(document.getElementById("couleur").value);
        li.appendChild(texte);
        document.getElementById("liste").appendChild(li);
        document.getElementById("couleur").value = "";
        document.getElementById("couleur").focus();
        if(couleur.length == 0){
            return false;
        }
    }
)
document.getElementById("liste").addEventListener('click',
    function(e){
          document.getElementById("liste").removeChild(e.target);
    }
)

问题是当输入为空时，当我点击添加“li”时，它继续添加空的“li”O_o

如何停止该事件？我已经有了 length = 0 的条件，但如果我只返回 false 则不起作用。

如果您有任何想法，我愿意接受=)

祝你有美好的一天

Answer 1

检查长度是否为零的 if 语句位于函数末尾。返回 false 不会取消已经运行的代码；您必须在添加 LI 之前返回。将该 if 语句移至函数顶部，如下所示:

document.getElementById("ajouter").addEventListener('click',
    function (){
        var couleur = document.getElementById("couleur").value;
        if(couleur.length == 0){
            return false;
        }
        var li = document.createElement("li");
        var texte =       document.createTextNode(document.getElementById("couleur").value);
        li.appendChild(texte);
        document.getElementById("liste").appendChild(li);
        document.getElementById("couleur").value = "";
        document.getElementById("couleur").focus();
    }
)