Javascript 关键事件后删除子项

Javascript 关键事件后删除子项,javascript,html,Javascript,Html,我正在尝试获取并显示输入。当我输入一个数字(例如4)时,我的文档在循环中显示数字,数量取决于输入的数字。我试图让它在某种程度上,如果我想再次输入一个数字,这将创建一个新的列表,旧的列表将被删除。负责此操作的代码由行分隔 <div id="get-numbers"> <label for="input-one">Enter the number</label><br> <input type="text" id="input-o

我正在尝试获取并显示输入。当我输入一个数字(例如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>

输入号码
document.querySelector(“#input one”).addEventListener('keypress',函数(e){ var inputOneValue=document.getElementById('input-one').value; var key=e.which | e.keyCode; 如果(键==13){ 如果(输入值>=0){ document.getElementById('input-one')。值=“”; //---------------------------------------------- var getNumbers=document.getElementById('container-number'); var child=getNumbers.childs; 如果(子项!=0){ var divNumber=document.getElementsByClassName('div-number'); getNumbers.removeChild; } //---------------------------------------------- 否则{
对于(var i=0;ijavascript HTML DOM方法
romoveChild()
,删除父元素的子元素。 要从父对象中删除子对象,我们需要将子对象引用传递给
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 = '';
        }
    }
});
document.querySelector(“#输入一”).addEventListener('keypress',函数(e){
var inputOneValue=parseInt(document.getElementById('input-one').value);
var key=e.which | e.keyCode;
如果(键==13){
如果(输入值>=0){
document.getElementById('input-one')。值=“”;
//----------------------------------------------
var getNumbers=document.getElementById('container-number');
var childs=getNumbers.childNodes;
如果(儿童长度>0){
对于(变量i=0;i对于(var i=0;我为什么不在包含列表的父元素上使用
elem.innerHTML='',
来清除它。但这不会永久删除父元素?是否要删除父元素及其子元素?是的,但在删除它们之后,我要创建新的元素,在输入循环长度的新值之后,在单击IG键“enter”之后。谢谢,但我没有实际上,不需要使用循环。我写了两行代码来代替它。在getNumbers下面,我写了getNumbers.innerHTML=''”,然后程序运行得最好:D