JavaScript向div中添加数据，并删除的功能

最新推荐文章于 2023-11-30 19:37:39 发布

四夕520

最新推荐文章于 2023-11-30 19:37:39 发布

阅读量3.2k

点赞数

本文链接：https://blog.csdn.net/Luokaiqin520/article/details/79210003

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bom练习</title>
<script type="text/javascript">
function removeButM(){
var xx = document.getElementById("addM");
xx.remove();
}
function removeButY(){
var xx = document.getElementById("addY");
xx.remove();
}
function removeButS(){
var xx = document.getElementById("addS");
xx.remove();
}
function removeButYY(){
var xx = document.getElementById("addYY");
xx.remove();
}
function removeButT(){
var xx = document.getElementById("addT");
xx.remove();
}

function addButM(){
var oo = document.createElement("input")
oo.value="美术 ✖";
document.getElementById("addAll").appendChild(oo);
oo.setAttribute("type","button");
oo.setAttribute("onclick","removeButM()");
oo.setAttribute("id","addM")
var div1 = document.getElementById("addAll");
div1.appendChild(oo);
}
function addButY(){
var oo = document.createElement("input")
oo.value="语文 ✖";
document.getElementById("addAll").appendChild(oo);
oo.setAttribute("type","button");
oo.setAttribute("onclick","removeButY()");
oo.setAttribute("id","addY")
var div1 = document.getElementById("addAll");
div1.appendChild(oo);
}
function addButS(){
var oo = document.createElement("input")
oo.value="数学 ✖";
document.getElementById("addAll").appendChild(oo);
oo.setAttribute("type","button");
oo.setAttribute("onclick","removeButS()");
oo.setAttribute("id","addS")
var div1 = document.getElementById("addAll");
div1.appendChild(oo);
}
function addButYY(){
var oo = document.createElement("input")
oo.value="英语 ✖";
document.getElementById("addAll").appendChild(oo);
oo.setAttribute("type","button");
oo.setAttribute("onclick","removeButYY()");
oo.setAttribute("id","addYY")
var div1 = document.getElementById("addAll");
div1.appendChild(oo);
}
function addButT(){
var oo = document.createElement("input")
oo.value="体育 ✖";
document.getElementById("addAll").appendChild(oo);
oo.setAttribute("type","button");
oo.setAttribute("onclick","removeButT()");
oo.setAttribute("id","addT")
var div1 = document.getElementById("addAll");
div1.appendChild(oo);
}

</script>
</head>
<body>
<div style="width: 400px;height: 300px;" id="addAll">
<input type="button" value="美术 ✖" οnclick="removeButM()" id="addM"/>
<input type="button" value="语文 ✖" οnclick="removeButY()" id="addY"/>
<input type="button" value="数学 ✖" οnclick="removeButS()" id="addS"/>
<input type="button" value="英语 ✖" οnclick="removeButYY()" id="addYY"/>
<input type="button" value="体育 ✖" οnclick="removeButT()" id="addT"/>
</div>
<input type="button" value="美术" οnclick="addButM()"/>
<input type="button" value="语文" οnclick="addButY()"/>
<input type="button" value="数学" οnclick="addButS()"/>
<input type="button" value="英语" οnclick="addButYY()"/>
<input type="button" value="体育" οnclick="addButT()"/>

</body>
</html>