使用HTMLCollection移除slot子元素时提示无子节点的问题咨询

核心结论：不是HTMLCollection导致的错误 #

错误提示“不存在子节点”的主要原因有两个：

• dragover事件会高频触发，第一次移除<p>后，后续触发时lastChild可能指向文本节点（HTML中的换行、空格会被解析为文本节点）或null，此时调用removeChild就会报错。
• 依赖slots[i]操作元素存在隐患：getElementsByClassName返回的是动态HTMLCollection，DOM结构变化时集合会自动更新，回调里的slots[i]可能不再是当初绑定事件的那个slot元素。

修复方案 #

方案1：精准定位要移除的元素，避免依赖lastChild

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

for (let i = 0; i < slots.length; i++) {
  slots[i].addEventListener('dragover', (e) => {
    e.preventDefault(); // 必须调用，否则无法触发drop事件
    const dragging = document.querySelector('.card-dragging');
    if (!dragging) return; // 防止找不到拖拽元素时报错

    // 用currentTarget获取当前触发事件的slot，比slots[i]更可靠
    const currentSlot = e.currentTarget;
    // 精准找到要移除的<p>元素
    const tempCard = currentSlot.querySelector('.card-temp');
    
    if (tempCard) {
      currentSlot.removeChild(tempCard);
    }
    currentSlot.appendChild(dragging);
  })
};

方案2：改用静态NodeList（推荐）

用querySelectorAll返回静态集合，不受DOM变化影响，配合forEach遍历更简洁：

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

slots.forEach(slot => {
  slot.addEventListener('dragover', (e) => {
    e.preventDefault();
    const dragging = document.querySelector('.card-dragging');
    if (!dragging) return;

    const tempCard = slot.querySelector('.card-temp');
    if (tempCard) {
      slot.removeChild(tempCard);
    }
    slot.appendChild(dragging);
  });
});

关键改进点 #

1. 精准定位元素：用querySelector('.card-temp')直接找到目标<p>，避免lastChild带来的文本节点干扰。
2. 可靠获取当前元素：用e.currentTarget或forEach中的slot变量，确保操作的是触发事件的那个slot，规避动态HTMLCollection的潜在问题。
3. 增加容错判断：添加if (!dragging)和if (tempCard)，防止空值调用方法导致报错。
4. 修复拖拽事件逻辑：添加e.preventDefault()，这是实现拖拽功能的必要步骤，否则后续drop事件无法触发。

内容的提问来源于stack exchange，提问作者Abdul Samad