javascript - 重大事件后带走 child

Question

我正在尝试获取并显示输入。当我输入一个数字(例如 4)时，我的文档会循环显示数字，金额取决于输入的数字。我尝试以这样的方式进行:如果我想再次输入数字，则会创建一个新列表，并且旧列表将被删除。负责此操作的代码由行分隔。

<div id="get-numbers">
    <label for="input-one">Enter the number</label><br>
    <input type="text" id="input-one">
    <div id="container-numbers"></div>
</div>



<script>
    document.querySelector('#input-one').addEventListener('keypress', function(e){
        var inputOneValue = document.getElementById('input-one').value;
        var key = e.which || e.keyCode;
        if (key == 13){
            if (inputOneValue>=0){
                document.getElementById('input-one').value = ' ';
                //----------------------------------------------
                var getNumbers = document.getElementById('container-number');
                var child = getNumbers.children;
                if (child != 0){
                    var divNumber = document.getElementsByClassName('div-number');
                    getNumbers.removeChild;
                }
                //----------------------------------------------
                else{
                    for (var i=0; i<inputOneValue; i++){
                        var numberLi = document.createElement('DIV');
                        numberLi.className = 'div-number';
                        var numberText = document.createTextNode(i);
                        numberLi.appendChild(numberText);
                        getNumbers.appendChild(numberLi);
                    }
                }    
            }
            else document.getElementById('input-one').value = ' ';
        }
    });

</script>

Answer 1

javascript HTML DOM 方法removeChild()，删除父元素的子元素。 要从父级中删除子级，我们需要将子级引用传递给 removeChild() 方法。

更新后的脚本:

document.querySelector('#input-one').addEventListener('keypress', function(e){
    var inputOneValue = parseInt(document.getElementById('input-one').value);
    var key = e.which || e.keyCode;
    if (key == 13){
        if (inputOneValue >= 0){
            document.getElementById('input-one').value = '';
            //----------------------------------------------
            var getNumbers = document.getElementById('container-number');
            var childs = getNumbers.childNodes;
            if (childs.length > 0){
                for (var i = 0; i < childs.length; i++) {
                    getNumbers.removeChild(childs[i]);
                }

                // Alternative but slower
                // getNumbers.innerHTML = '';
            }
            //----------------------------------------------
            else{
                for (var i=0; i<inputOneValue; i++){
                    var numberLi = document.createElement('DIV');
                    numberLi.className = 'div-number';
                    var numberText = document.createTextNode(i);
                    numberLi.appendChild(numberText);
                    getNumbers.appendChild(numberLi);
                }
            }    
        }
        else {
            document.getElementById('input-one').value = '';
        }
    }
});