removeChild Sözdizimi - Bir Çift Deneyimli Göze İhtiyacım Var

Question

RemoveChild yöntemini ilk defa kullanıyorum. Benim navbarımı değiştirmek için javascript kullanıyorum, böylece sabit pozisyona ve kullanıcı ile birlikte ilerleyin. Bu, bu gerçekleştiğinde vücut div içeriğinin biraz yukarı sıçramasına neden olur. Sonuç olarak, navbarın konumu değiştiğinde fazladan yer açmak için kırmızı bir kutu (daha sonra beyaz olacak) eklemeyi başardım.

Kullanıcı en üste geri kaydırıldığında kaldırılacak kırmızı kutucuğa ihtiyacım var, ancak kaldırılan alt öğenin işten çıkmasını sağlayamıyorum. Birisi bana bir göz atabilir ve bana doğru yönde doğruca işaret edebilirdi!

kodu (ilgili kod bölümü kalın harflerle gösterilmiştir):

var fillerState = false; 
// fixed positioning on scroll property for taskbar: 
    window.addEventListener('scroll', function (evt) { 
     var distance_from_top = document.body.scrollTop; 
     if (distance_from_top <= 80) { 
     document.getElementById("navBar").style.position = "static"; 
     document.getElementById("navBarList").style.borderBottom = "solid black 4px"; 
     document.getElementById("navBar").style.borderTop = "initial"; 
     var myCollection = document.getElementsByClassName("navBarLink"); 
     var collectionLength = myCollection.length; 
     for(var i = 0; i < collectionLength; i++){ 
      myCollection[i].style.borderTopLeftRadius = "1em"; 
      myCollection[i].style.borderTopRightRadius = "1em"; 
      myCollection[i].style.borderBottomLeftRadius = "initial"; 
      myCollection[i].style.borderBottomRightRadius = "initial"; 
      } 
// stops loads of boxes from forming: 
     **if(fillerState == true){ 
      var parentRemove = document.getElementById("bodyDiv"); 
      var fillerBoxRemove = document.getElementById("fillerBox"); 
      parentRemove.removeChild(fillerBoxRemove); 
      fillerState = false; 
      alert(fillerState);** 
     } 

     } 


     else if(distance_from_top > 80) { 
      document.getElementById("navBar").style.position = "fixed"; 
      document.getElementById("navBar").style.top = "0px"; 
      document.getElementById("navBar").style.borderTop = "solid black 4px"; 
      document.getElementById("navBarList").style.borderBottom = "initial"; 
      var myCollection = document.getElementsByClassName("navBarLink"); 
      var collectionLength = myCollection.length; 
      if(fillerState == false){ 

     // sets filler element so that the page doesn't bounce: 
       var filler = document.createElement("div"); 
       filler.style.width = "200px"; 
       filler.style.height = "80px"; 
       filler.style.backgroundColor = "red"; 
       filler.style.id = "fillerBox"; 

     //defines where the new element will be placed: 
       var parent = document.getElementById("bodyDiv"); 
       var brother = document.getElementById("leftColumn"); 
       parent.insertBefore(filler,brother); 
       fillerState = true; 

      } 



      for(var i = 0; i < collectionLength; i++){ 
       myCollection[i].style.borderTopLeftRadius = "initial"; 
       myCollection[i].style.borderTopRightRadius = "initial"; 
       myCollection[i].style.borderBottomLeftRadius = "1em"; 
       myCollection[i].style.borderBottomRightRadius = "1em"; 
       } 
     } 

    }); 

Answer 1

şaşı da söylediği gibi eleman yapıyoruz zaman, bunu doğru değil style.id, var kuruyoruz.

Değişimi:

filler.style.id = "fillerBox"; 

için:

filler.id = "fillerBox"; 

Ve kod çalışacaktır.

Alternatif olarak, başkalarının önerdiği ve html'nin kendisinde olduğu gibi oluşturabildiği gibi, görüntü içermeyen bir sınıfa ayarlayabilir ve sonra sınıfını değiştirebilirsiniz. Sadece daha kolay değil, aynı zamanda sizi yaratıp yok etmenizi engeller. Bu şekilde daha az kaynak yoğun.