使用javascript刪除元素

大家好！我是html/css/javascript的新手。我正在Coursera學習這類課程。在程序中，我嘗試使用「theRightSide」複製「theLeftSide」並刪除「theRightSide」中的最後一個圖像。我已經嘗試了兩天的每種方法。但無法修復它。 Chrome說「Uncaught TypeError：無法讀取屬性'parentNode'爲null」。誰能告訴我錯誤在哪裏？萬分感謝！！！使用javascript刪除元素

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>Document</title> 
     <style> 
      img {position: absolute;} 
      div {position: absolute;width: 500px;height: 500px;} 
      #rightside {left: 500px;border-left: 1px solid black;} 
     </style> 
    </head> 
    <body onload="generateFaces()"> 
     <h1>Matching Game</h1> 
     <p>Click on the extra smiling face on the left</p> 
     <div id="leftside"></div> 
     <div id="rightside"></div> 
     <script> 
      var numberOfFaces=5; 
      var theLeftSide=document.getElementById("leftside"); 
      var theRightSide=document.getElementById("rightside"); 

      function generateFaces(){ 
       for (var i = 0; i <numberOfFaces; i++) { 
        var pic=document.createElement("img"); 
        pic.src="smile.png"; 
        pic.style.top=Math.random()*400+"px"; 
        pic.style.left=Math.random()*400+"px"; 
        theLeftSide.appendChild(pic); 

       }; 
      } 
      var leftSideImages=theLeftSide.cloneNode(true); 
      var last_child=leftSideImages.lastChild; 
      last_child.parentNode.removeChild(last_child); 
      theRightSide.appendChild(leftSideImages);  
     </script> 
    </body> 
    </html>

來源

2015-12-05 hyoukai

體面瀏覽器有['node.remove（）']（https://developer.mozilla.org/en-US/docs/Web/API/ ChildNode/remove），而不是'lastChild'，你可能想使用'lastElementChild'來確定它不是文本節點或空白區域。 – Rudie

'body.onload'事件處理程序稍後觸發，當主體完成加載時，這就是當您將元素添加到左側時，但您嘗試將這些元素移動到頁面加載時，當它們還沒有到達時。 – adeneo

像@adeneo在評論解釋說：的body.onload事件處理火災後，當身體已經裝載完畢，而當你的元素添加到左側那，但你想移動頁面加載時的那些元素，當他們還沒有時。

所以，你所要做的就是添加使用的leftside孩子的那追加的孩子的（功能generateFaces()內）循環之後的代碼，以便它可以找到這個孩子的。

希望這會有所幫助。

來源

2015-12-05 23:34:38

把lastchild體負荷的函數內：

function generateFaces(){ 
      for (var i = 0; i <numberOfFaces; i++) { 
       var pic=document.createElement("img"); 
       pic.src="smile.png"; 
       pic.style.top=Math.random()*400+"px"; 
       pic.style.left=Math.random()*400+"px"; 
       theLeftSide.appendChild(pic); 

      }; 
      var leftSideImages=theLeftSide.cloneNode(true); 
      var last_child=leftSideImages.lastChild; 
      last_child.parentNode.removeChild(last_child); 
      theRightSide.appendChild(leftSideImages); 
     }

它具有圖像之前觸發。函數generateFaces（）在加載正文後開始，但其餘代碼儘快運行，因此運行時沒有孩子。希望它有幫助。

來源

2015-12-05 23:42:00

該函數的運行時間比它下面的代碼晚，如果在分配它之後記錄leftSideImages的值，您將看到它不包含子項。

這樣做的一種方法是將代碼放入函數中。

代碼：

  var numberOfFaces=5; 
      var theLeftSide=document.getElementById("leftside"); 
      var theRightSide=document.getElementById("rightside"); 

      function generateFaces(){ 
       for (var i = 0; i <numberOfFaces; i++) { 
        var pic=document.createElement("img"); 
        pic.src="smile.png"; 
        pic.style.top=Math.random()*400+"px"; 
        pic.style.left=Math.random()*400+"px"; 
        theLeftSide.appendChild(pic); 

       }; 

       var leftSideImages=theLeftSide.cloneNode(true); 
       console.log(leftSideImages); 
       var last_child=leftSideImages.lastChild; 
       last_child.parentNode.removeChild(last_child); 
       theRightSide.appendChild(leftSideImages); 
      }

Example

來源

2015-12-05 23:43:37

Np :)如果您認爲它有幫助，一定要接受答案。 –

使用javascript刪除元素

回答

相關問題