Удаление элемента с помощью javascript

все! Я новичок в html/css/javascript. Я изучаю такие курсы на Курсере. В программе я пытаюсь использовать «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 срабатывает позже, когда тело закончит загрузку, и тогда вы добавляете элементы в левую часть, но вы пытаетесь переместить эти элементы в pageload, когда их еще нет. , – adeneo

Как @adeneo объяснил в комментарии: В body.onload обработчик события срабатывает позже, когда тело завершит загрузку, и вот, когда вы добавляете элементы в левую сторону, но вы пытаетесь переместить эти элементы на pageload, когда их еще нет.

Так что вы должны сделать, это добавить код, использовать Чайлдс из leftside после цикла, что Append этого Чайлдса (внутри функций 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

ответ

Смежные вопросы