如何通过JavaScript移除动态添加的图片？（打地鼠游戏开发问题）

一、修复"moleNode不是节点类型"的错误 #

你的错误出在两个核心点：

1. 顺序逻辑颠倒：你在把地鼠插入DOM之前就尝试获取.mole元素，此时DOM里根本没有这个节点，moleNode会返回null，自然无法执行removeChild。
2. 字符串≠DOM节点：mole是HTML字符串，不是真实的DOM节点，所以mole.parentNode这个属性根本不存在，调用它会直接报错。

修正方案1：调整执行顺序 #

先完成地鼠的DOM插入，再获取节点进行移除：

<div class="hole" id="h1"></div>
<script>
  let mole = `<img src="mole.jpg" height="70px" width="70px" class="mole">`;
  const hole = document.querySelector('#h1');
  // 先把地鼠插入洞中
  hole.innerHTML = mole;
  // 此时DOM中存在.mole节点，可正常获取
  let moleNode = document.querySelector('.mole');
  // 移除节点
  hole.removeChild(moleNode);
</script>

修正方案2：用DOM API创建节点（更推荐） #

直接创建真实的DOM节点，避免字符串操作的局限性，后续更易扩展：

<div class="hole" id="h1"></div>
<script>
  // 创建img类型的DOM节点
  const moleNode = document.createElement('img');
  moleNode.src = 'mole.jpg';
  moleNode.height = 70;
  moleNode.width = 70;
  moleNode.className = 'mole';
  
  const hole = document.querySelector('#h1');
  // 将地鼠节点添加到洞中
  hole.appendChild(moleNode);
  // 移除地鼠节点
  hole.removeChild(moleNode);
</script>

二、批量处理36个洞的实现方案 #

针对36个洞的场景，推荐用预生成洞节点+控制地鼠显示/隐藏的方式，避免频繁添加/移除DOM节点影响性能。

1. 批量生成36个洞节点 #

用JS循环快速生成所有洞容器：

<!-- 先准备一个容器承载所有洞 -->
<div class="holes-container"></div>
<script>
  const container = document.querySelector('.holes-container');
  // 循环生成36个洞
  for (let i = 1; i <= 36; i++) {
    const hole = document.createElement('div');
    hole.className = 'hole';
    hole.id = `h${i}`;
    container.appendChild(hole);
  }
</script>

2. 实现地鼠随机出现/隐藏逻辑 #

不用每次移除节点，通过控制style.display属性切换显示状态更高效：

// 获取所有洞节点
const allHoles = document.querySelectorAll('.hole');

// 随机显示一个地鼠的函数
function showRandomMole() {
  // 先隐藏所有已显示的地鼠
  allHoles.forEach(hole => {
    const mole = hole.querySelector('.mole');
    if (mole) mole.style.display = 'none';
  });

  // 随机选择一个洞
  const randomIndex = Math.floor(Math.random() * allHoles.length);
  const targetHole = allHoles[randomIndex];

  // 若目标洞没有地鼠，就创建一个
  let mole = targetHole.querySelector('.mole');
  if (!mole) {
    mole = document.createElement('img');
    mole.src = 'mole.jpg';
    mole.height = 70;
    mole.width = 70;
    mole.className = 'mole';
    targetHole.appendChild(mole);
  }
  // 显示地鼠
  mole.style.display = 'block';

  // 1秒后自动隐藏地鼠
  setTimeout(() => {
    if (mole) mole.style.display = 'none';
  }, 1000);
}

// 每隔1.5秒触发一次随机地鼠生成
setInterval(showRandomMole, 1500);

内容的提问来源于stack exchange，提问作者Yosef Pulikkotil