极客观点
项目管理
HarmonyOS
目的，点击哪一个红色小块，就删除哪一个红色小块怎么实现
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Task-18</title>
<script src="js.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrap">
<input type="text" id="input">
<button id="left-in">左侧进入</button>
<button id="right-in">右侧进入</button>
<button id="left-del">左侧删除</button>
<button id="right-del">右侧删除</button>
</div>
<div id="queue">
</div>
</body>
</html>
----
js部分
window.onload = function(){
var input = document.getElementById('input');
var left_in = document.getElementById('left-in');
var left_del = document.getElementById('left-del');
var right_in = document.getElementById('right-in');
var right_del = document.getElementById('right-del');
var queue = document.getElementById('queue');
var data = [];
//添加输入的数据到queue中
function addata(){
var queue = document.getElementById('queue');
queue.innerHTML = '';
for(var i = 0;i<data.length;i++){
queue.innerHTML += "<div class='item'>"+data[i]+"</div>"
}
}
//从左边添加
left_in.addEventListener('click',function(){
var inputVal = input.value;
//console.log(inputVal)
if((/^[0-9]+$/).test(inputVal)){
data.unshift(inputVal);
addata()
}else{
alert("请输入数字")
}
})
//从右边添加
right_in.addEventListener('click',function(){
var inputVal = input.value;
//console.log(inputVal)
if((/^[0-9]+$/).test(inputVal)){
data.push(inputVal);
addata()
}else{
alert("请输入数字")
}
})
//从右边删除
right_del.addEventListener('click',function(){
data.pop();
addata()
})
//从左边删除
left_del.addEventListener('click',function(){
data.shift();
addata()
})
//删除点击的数据（item)
queue.addEventListener('click',deleteDiv,false);
function deleteDiv(event){
if(event.target.nodeName =='item'){
queue.removeChild(event.target)
}
}
})
}
