Javascript 关键事件后删除子项
我正在尝试获取并显示输入。当我输入一个数字(例如4)时,我的文档在循环中显示数字,数量取决于输入的数字。我试图让它在某种程度上,如果我想再次输入一个数字,这将创建一个新的列表,旧的列表将被删除。负责此操作的代码由行分隔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
<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