我想制作分形树，如果我按左键单击我应该添加新的 div 如果我按右键单击它应该是减少 div，但是左键单击功能不起作用，它应该是递归的但它只是添加一个 div，如果我再次按下左键单击，则没有任何反应，右键单击也不起作用，所有的 div 都消失了。这是我的代码
<head>
<style type="text/css">
div {
position: absolute;
background-color: #e21d27;
opacity: 0.8;
transition: 2s;
}
div#start {
width: 100px;
height: 100px;
transform: translate(300%, 300%);
}
div div {
width: 100%;
height: 100%;
}
div div:nth-child(1) {
transform: translate(-42%, -105%) rotate(-37deg) scale(0.8, 0.8);
}
div div:nth-child(2) {
transform: translate(55%, -91%) rotate(53deg) scale(0.6, 0.6) ;
}
div:hover {
transition: 1s;
opacity: 1;
}
</style>
</head>
<body>
<div id="start"></div>
<script>
var coba =27;
var leftClick = document.getElementById("start");
var rightClick = document.getElementById("start");
leftClick.onclick = function(){
for ( var i = 0; i< coba; i++ ) {
var di = document.createElement('div');
leftClick.appendChild(di);
}
}
rightClick.oncontextmenu = function(){
for ( var i = 0; i< coba; i++ ) {
var removedi = document.getElementById("start");;
removedi.parentNode.removeChild(removedi);
}
}
</script>
</body>
非常感谢你的帮助
最佳答案
您的右键单击功能正在删除整个“开始”div。 removedi 设置为该 div，然后您在其父级上调用 removeChild，导致它被删除。这可能就是为什么当您右键单击时所有内容都会被删除的原因。相反，您应该删除起始 div 的子节点。
你可能想要这样的东西:
var start = document.getElementById('start');
for (var i = 0; i < start.childNodes.length; i++) {
var child = start.childNodes[i];
start.removeChild(child);
}
我不确定为什么您的左键单击处理程序没有执行您想要的操作。
关于javascript - 使用 appenChild 添加 div 并使用 removeChild 减少 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40453468/