javascript - 怎么删除点击的那部分
本文介绍了javascript - 怎么删除点击的那部分的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
目的，点击哪一个红色小块，就删除哪一个红色小块怎么实现
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)
}
}
})
}
解决方案
红块父元素.addEventListener('click',deleteDiv,false);
function deleteDiv(event){
//判断event.target是否是红块
//通过tagName或者别的
//是的话
红块父元素.removeChild(event.target)
}这篇关于javascript - 怎么删除点击的那部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
