Не работает removeChild()

Question

Всем привет. Не могу разобраться почему не работает removaeChild() У меня есть простой код html

<div class="header__menu">
            <button class="header__menu__close">x</button>

            <nav class="header__nav">
              <ul class="nav__list">
                <li class="nav__item"><a href="#">Hello</a></li>
                <li class="nav__item"><a href="#">Hello</a></li>
                <li class="nav__item"><a href="#">Hello</a></li>
                <li class="nav__item"><a href="#">Hello</a></li>
              </ul>
            </nav>

            <button class="menu__btn">Menu BTN</button>
          </div>

При скроле страницы до определенного момента я хочу что бы появилась новая ссылка в меню а при скролле еще ниже что бы она ичезла

const nav__list = document.querySelector(".nav__list");
      const nav__item = document.querySelectorAll(".nav__item");
      let isScrolled = false;
      window.addEventListener("scroll", () => {
        const scrollTop =
          window.pageYOffset || document.documentElement.scrollTop;
          const li = document.createElement("li");
          const a = document.createElement("a");
        if (scrollTop >= 500 && !isScrolled) {
          a.classList.add("nav__item");
          a.innerHTML = "Bye";
          li.appendChild(a);
          nav__list.appendChild(li);
          isScrolled = true;
        } else if (scrollTop >= 600 && isScrolled) {
          nav__list.removeChild(li);
          isScrolled = false;
        }
      });

Answer 1

Вы пытаетесь удалить только что созданный элемент, который уже не является дочерним элементом. Попробуйте вот так:

const nav__list = document.querySelector(".nav__list");
let addedItem = null;

window.addEventListener("scroll", () => {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    
    if (scrollTop >= 500 && !addedItem) {
        const li = document.createElement("li");
        const a = document.createElement("a");
        a.classList.add("nav__item");
        a.innerHTML = "Bye";
        li.appendChild(a);
        nav__list.appendChild(li);
        addedItem = li
    } else if (scrollTop < 500 && addedItem) {
        nav__list.removeChild(addedItem);
        addedItem = null;
    }
});

Answer 2

Не могу разобраться почему не работает removaeChild()

У тебя не верный алгоритм...

Предложу такой вариант.

const nav__list = document.querySelector(".nav__list");
const nav__item = document.querySelectorAll(".nav__item");
const li = document.createElement("li");;
const a = document.createElement("a");
a.classList.add("nav__item");
a.classList.add("del");
a.innerHTML = "Bye";
li.appendChild(a);
window.addEventListener("scroll", () => {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  const isScrolled = nav__list.querySelector(".del");
  if (scrollTop >= 600) {
    if (isScrolled) nav__list.removeChild(li);
  } else if (scrollTop >= 500) {
    if (!isScrolled) nav__list.appendChild(li);
  }
});

body {
  height: 200vh;
  min-height: 2000px;
}

.header__menu {
  position: fixed;
  top: 0;
}

<div class="header__menu">
  <button class="header__menu__close">x</button>

  <nav class="header__nav">
    <ul class="nav__list">
      <li class="nav__item"><a href="#">Hello</a></li>
      <li class="nav__item"><a href="#">Hello</a></li>
      <li class="nav__item"><a href="#">Hello</a></li>
      <li class="nav__item"><a href="#">Hello</a></li>
    </ul>
  </nav>

  <button class="menu__btn">Menu BTN</button>
</div>

БЛОГ НА HUSL

Не работает removeChild()

Ответы (2 шт):