我的代码知识非常有限,来自 CodeHS 和 Codecademy,所以请耐心等待。
所以我试图制作一个数字列表,可以通过单击删除。到目前为止,数字列表一切顺利,但我仍然不知道如何在单击 div 框时删除它们。
我知道有 JSFiddle,但我认为这是我能做的最好的: http://www.codecademy.com/rfabrega/codebits/xZ61aJ
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=203">
<title>Lista Mundial</title>
<style>
.divContainer {
width: 35px;
height: 25px;
border: solid 1px #c0c0c0;
background-color: #e1e1e1;
font-family: verdana;
color: #000;
float: left;
}
.text {
font-size: 15px;
font-family: verdana;
color: black;
margin-top: 4px;
}
</style>
</head>
<body>
<script type="text/javascript">
for(var i = 1; i <= 639; i++){
var divTag = document.createElement("div");
divTag.id = i;
divTag.className = "divContainer";
document.body.appendChild(divTag);
var pTg = document.createElement("p");
pTg.setAttribute("align", "center");
pTg.className = "text";
pTg.innerHTML = (i);
document.getElementById(i).appendChild(pTg);
}
</script>
</body>
</html>
最佳答案
您必须创建一个单击函数来删除目标 div 标签: 所以在你的代码中,创建 div 元素之后。插入这个:
divTag.onclick = function(){this.parentNode.removeChild(this)};
关于javascript - 点击删除用JS制作的动态div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22849837/