childNodes is 0 but I have children

Question

I have the following HTML. Using JS, I have a HTMLcollection of slot. And then I am trying to remove the child <p> for a given slot. But the JS console is throwing an error that there is no child. Is it because I have a HTMLCollection?

const slots = document.getElementsByClassName('slot');

for (let i = 0; i < slots.length; i++) {
  slots[i].addEventListener('dragover', () => {
    const dragging = document.querySelector('.card-dragging');
    slots[i].appendChild(dragging);
    slots[i].removeChild(slots[i].lastChild);
  })
};

<section class="slots">
  <div class="slot">
    <img id="rabbit" src="https://gravatar.com/avatar/c331326b84b173e6fb0ddaefd8520044?s=400&d=retro&r=x" alt="rabbit" />
    <p class="card-slot card-temp"></p>
  </div>

  <div class="slot">
    <img id="ball" src="https://gravatar.com/avatar/c331326b84b173e6fb0ddaefd8520044?s=400&d=retro&r=x" alt="ball" />
    <p class="card-slot card-temp"></p>
  </div>

  <div class="slot">
    <img id="book" src="https://gravatar.com/avatar/c331326b84b173e6fb0ddaefd8520044?s=400&d=retro&r=x" alt="book" />
    <p class="card-slot card-temp"></p>
  </div>
</section>

Answer 1

Your code can benefit from Delegation

You cannot remove the child in the middle of dragging, I expect you want to hide and move it back outside when you drop?

I could not find the .card-dragging so I guessed

const slots = document.querySelector('.slots');
slots.addEventListener('dragover', (e) => {
  const tgt = e.target.closest('div.slot');
  if (!tgt) return;
  const dragging = document.querySelector('.card-dragging');
  tgt.appendChild(dragging);
})

img {
  height: 50px;
}

.slot { border: 1px solid black; }

<section class="slots">
  <div class="slot">
    <img id="rabbit" src="https://gravatar.com/avatar/c331326b84b173e6fb0ddaefd8520044?s=400&d=retro&r=x" alt="rabbit" />
    <p class="card-slot card-temp"></p>
  </div>

  <div class="slot">
    <img id="ball" src="https://gravatar.com/avatar/c331326b84b173e6fb0ddaefd8520044?s=400&d=retro&r=x" alt="ball" />
    <p class="card-slot card-temp"></p>
  </div>

  <div class="slot">
    <img id="book" src="https://gravatar.com/avatar/c331326b84b173e6fb0ddaefd8520044?s=400&d=retro&r=x" alt="book" />
    <p class="card-slot card-temp"></p>
  </div>
</section>
<div class="card-dragging">Drop?</div>