JavaScript remove()函数失效：餐厅页面Tab切换内容叠加问题

问题现象 #

开发餐厅页面时，Home、Contact、Menu三个Tab首次点击可正常显示对应页面，但再次点击同一Tab或切换至其他Tab时，旧页面未被移除，新页面直接叠加在旧页面下方。

问题根源 #

每次调用home()、menu()、contact()都会生成全新的DOM元素，导致：

1. 代码中element.contains(menu())这类判断永远不成立——因为判断的是刚创建的新元素，而非之前已添加到页面的旧元素。
2. 每次点击都直接追加新元素，旧元素始终留在DOM中，造成叠加。

修复方案 #

方案一：清空内容区（保留Tab按钮） #

思路：每次点击Tab时，先移除内容区中除了三个Tab按钮之外的所有元素，再添加目标页面内容。

修改src/tab.js代码如下：

import home from './home.js';
import menu from './menu.js';
import contact from './contact.js';

export default function tabs() {
  const element = document.getElementById('content');
  
  // 创建Tab按钮并添加统一类名，方便后续区分
  const homebutton = document.createElement("BUTTON");
  homebutton.classList.add('tab-btn');
  homebutton.textContent = "Home";

  const contactbutton = document.createElement("BUTTON");
  contactbutton.classList.add('tab-btn');
  contactbutton.textContent = "Contact";

  const menubutton = document.createElement("BUTTON");
  menubutton.classList.add('tab-btn');
  menubutton.textContent = "Menu";

  // 封装清除旧页面内容的函数
  function clearPageContent() {
    Array.from(element.children).forEach(child => {
      if (!child.classList.contains('tab-btn')) {
        child.remove();
      }
    });
  }

  // 绑定点击事件
  homebutton.addEventListener('click', () => {
    clearPageContent();
    element.appendChild(home());
  });
  
  menubutton.addEventListener('click', () => {
    clearPageContent();
    element.appendChild(menu());
  });

  contactbutton.addEventListener('click', () => {
    clearPageContent();
    element.appendChild(contact());
  });
  
  // 添加按钮到内容区
  element.appendChild(homebutton);
  element.appendChild(contactbutton);
  element.appendChild(menubutton);

  return element;
}

方案二：缓存页面元素（复用实例） #

思路：提前创建一次Home、Menu、Contact的DOM元素并缓存，后续点击Tab时直接复用这些实例，避免重复创建，同时精准切换页面。

修改src/tab.js代码如下：

import home from './home.js';
import menu from './menu.js';
import contact from './contact.js';

export default function tabs() {
  const element = document.getElementById('content');
  
  // 提前创建并缓存所有页面元素
  const homePage = home();
  const menuPage = menu();
  const contactPage = contact();
  
  // 创建Tab按钮
  const homebutton = document.createElement("BUTTON");
  homebutton.textContent = "Home";

  const contactbutton = document.createElement("BUTTON");
  contactbutton.textContent = "Contact";

  const menubutton = document.createElement("BUTTON");
  menubutton.textContent = "Menu";

  // 封装页面切换逻辑
  function switchPage(targetPage) {
    // 移除当前显示的页面
    [homePage, menuPage, contactPage].forEach(page => {
      if (page.parentElement === element) {
        page.remove();
      }
    });
    // 添加目标页面
    element.appendChild(targetPage);
  }

  // 绑定点击事件
  homebutton.addEventListener('click', () => {
    switchPage(homePage);
  });
  
  menubutton.addEventListener('click', () => {
    switchPage(menuPage);
  });

  contactbutton.addEventListener('click', () => {
    switchPage(contactPage);
  });
  
  // 添加按钮到内容区，默认显示Home页面
  element.appendChild(homebutton);
  element.appendChild(contactbutton);
  element.appendChild(menubutton);
  element.appendChild(homePage);

  return element;
}

方案对比 #

• 方案一：实现简单，适合页面内容需要动态更新的场景（如每次点击需重新加载数据）。
• 方案二：复用DOM元素，性能更优，适合内容固定的静态页面。

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