Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node

0

Cześć koledzy mam problem a szukajka mi nic nie mówi

const getPlanetsEarth = document.querySelector('.earth')
const getPlanetsJupiter = document.querySelector('.jupiter')
const getPlanetsMars = document.querySelector('.mars')
const getPlanetsMercury = document.querySelector('.mercury')
const getPlanetsMoon = document.querySelector('.moon')
const getPlanetsNeptune = document.querySelector('.neptune')
const getPlanetsSaturn = document.querySelector('.saturn')
const getPlanetsUranus = document.querySelector('.uranus')
const getPlanetsVenus = document.querySelector('.venus')
const planets = document.querySelector('.planet-select');
const btn = document.querySelector('.btn')
const demo = document.querySelector('.demo')
//const images =  document.querySelectorAll(".demo img")
const images =  document.getElementsByTagName('img')
const nution = 9.80665
const kg = 100
console.log(nution * kg)


const max = 2
let min = 0

btn.addEventListener('click', function(){
    console.error('j')
    choosePlanet();
    min++
    if(images.length>2){
        console.log('del')
        demo.removeChild(images).parentNode
    }
    else{
        console.log('not')
    }
   function relapce(){
    if(min == max){
        removeLastElement()
        console.log('4')
        images[0].remove()
        if(min==2){
            return min =0
        }
        
    }
   

   }
  
})
btn.addEventListener('dblclick', function(){
    console.log('fw')
})
const twojwynik = document.querySelector('.weight');
function choosePlanet(){
    if(planets.value== 'earth'){
        console.log('wynik: ', twojwynik.value* 2000)
        var imageEarth = document.createElement('div')
        imageEarth.innerHTML = "<img src='img/earth.png' width=200>";
        //imageEarth.src = 'img/earth.png'
        demo.appendChild(imageEarth)
      
    }
    else if(planets.value== 'jupiter'){
        
        console.log('wynik: ', twojwynik.value* 2000)
        var imageEarth = new Image(200, 200);
        imageEarth.src = 'img/jupiter.png'
        demo.appendChild(imageEarth)
        
    }
    else if(planets.value =='mars'){
        console.log('wynik: ', twojwynik.value* 2000)
        var imageEarth = new Image(200, 200);
        imageEarth.src = 'img/mars.png'
        document.body.appendChild(imageEarth)
    }
    else if(planets.value =='mercury'){
        console.log('wynik: ', twojwynik.value* 2000)
        var imageEarth = new Image(200, 200);
        imageEarth.src = 'img/mercury.png'
        document.body.appendChild(imageEarth)
    }
    else if(planets.value == 'moon'){
        console.log('wynik: ', twojwynik.value* 2000)
        var imageEarth = new Image(200, 200);
        imageEarth.src = 'img/moon.png'
        document.body.appendChild(imageEarth)
    }
    else if(planets.value == 'neptune'){
        console.log('wynik: ', twojwynik.value* 2000)
        var imageEarth = new Image(200, 200);
        imageEarth.src = 'img/neptune.png'
        document.body.appendChild(imageEarth)
    }
    else if(planets.value == 'saturn'){
        console.log('wynik: ', twojwynik.value* 2000)
        var imageEarth = new Image(200, 200);
        imageEarth.src = 'img/saturn.png'
        document.body.appendChild(imageEarth)
    }
    else if(planets.value == 'uranus'){
        console.log('wynik: ', twojwynik.value* 2000)
        var imageEarth = new Image(200, 200);
        imageEarth.src = 'img/uranus.png'
        document.body.appendChild(imageEarth)
    }
    else if(planets.value == 'venus'){
        console.log('wynik: ', twojwynik.value* 2000)
        var imageEarth = new Image(200, 200);
        imageEarth.src = 'img/venus.png'
        document.body.appendChild(imageEarth)
    }
    else{
        console.log('fault')
    }
    
}
<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <label for="choose-planet">Planet:</label>
        <select name="planets" class="planet-select">
            <option value="">---Click some planet</option>
        
        <option value="earth" class="earth">Earth</option>
        <option value="jupiter" class="jupiter">Jupiter</option>
        <option value="mars" class="mars">Mars</option>
        <option value="mercury" class="mercury">Mercury</option>
        <option value="moon" class="moon">Moon</option>
        <option value="neptune" class="neptune">Neptune</option>
        <option value="saturn" class="saturn'">Saturn</option>
        <option value="uranus" class="uranus">Uranus</option>
        <option value="venus" class="venus">Venus</option>
        
    </select>
    <div class="demo">
        <img></img>
    </div>
    <input type="weight" class="weight">
    <button class="btn">xa</button>
    <script type="module" src="app.js"></script>
     
    </body>
</html>

Wyswietla mi się w konsolce Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.

Generalnie chce zrobić tak że po wybraniu jakieś plany poprzednia się usuwa i wchodzi nowa ale one wgl nie chcą się usuwać a potem dodawać

1

Masz tutaj strasznie namieszane, ale... odpowiadając na pytanie to prawdopodobnie błąd masz w tym fragmencie

if(images.length > 2){
  console.log('del')
       
  demo.removeChild(images).parentNode
}

removeChild potrafi skasować jedynie jeden element, a próbujesz przekazać tam tablice elementów.

Musisz zrobić po niej pętle

if (images.length > 2) {
  for (const image of images) {
    demo.removeChild(image);

    // ewentualnie tak
    // ale nie jestem pewien, 
    // czy zadziała, wiec
    // musiałbyś  sprawdzić
    // image.remove(); 
  }
}

Jeżeli w divie demo znajdują się same zdjęcia to możesz też zrobić coś takiego

if (images.length > 2) {
  demo.innerHTML = ""; // kasujemy całą zawartość diva
}

I jako bonus :)
Mogę Ci powiedzieć, że taki zapis w HTMLu <img></img> jest błędny. Znacznika <img src="..." alt="..."> nie trzeba domykać i powinien posiadać atrybut src, oraz alt.

0

Też nie działa, wyskakuje error

app.js:30 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
at HTMLButtonElement.<anonymous>

0

Nie wiem, co chcesz osiągnąć: czy jedną widoczną planetę czy dwie…
Ale błąd jest nadal z tego powodu, że Ziemię dodajesz w divie, a później chcesz ją usuwać z rodzica demo, tak jak pozostałe planety.
Poza tym zamiast do demo dodajesz inne planety do document.body. I images jest już nieaktualne w procedurze obsługi zdarzenia click.
Tutaj jest wstępnie poprawiona wersja: https://codepen.io/overcq/pen/wvyqjjO

1 użytkowników online, w tym zalogowanych: 0, gości: 1