使用appenChild添加div，使用removeChild減少div

我想製作分形樹，如果我按左鍵單擊我要添加新div，如果按下右鍵單擊它應該是減小div，但左鍵單擊功能didn沒有工作，它應該是遞歸的，但它只是添加一個div，如果我再次按下左鍵單擊沒有發生，右鍵單擊也不起作用，所有的div都消失了。這是我的代碼使用appenChild添加div，使用removeChild減少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>

非常感謝你的幫助

來源

2016-11-06 Rona Nisa

你右擊功能是去除整個「開始」分區。 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); 
}

我不知道爲什麼你左鍵單擊處理程序沒有做你想要什麼。

來源

2016-11-06 19:49:23

謝謝，它的工作！ @triangle_man，你可以看看我的左鍵單擊功能，它不能做恢復 –

使用appenChild添加div，使用removeChild減少div

回答

相關問題