Svelte标签页关闭功能异常问题求助

我在Svelte中开发标签页系统，基础功能已完成，但标签页关闭功能始终有问题。当尝试从tabsandiframes数组中移除顶部标签时，未被删除的标签会继承被移除标签的内容，实际表现为点击顶部标签的关闭按钮，最终却只删除了底部标签。

我不清楚Demo中点击标签出现错乱的原因，但本地代码无此问题。（我是Svelte和StackOverflow新手，若问题存在明显答案或重复还请见谅）

现有代码 #

Script部分 #

$: tabsandiframes = [{id: 1, src: "https://www.google.com/?igu=1"}, {id: 2, src: "https://bing.com"}];
$: console.log(tabsandiframes)

let nextid = 4;
let newnextid = "";
var tabOrder = new Array();

function openTabAndIframe(id) {
  if (tabOrder.indexOf(id) > -1) {
    tabOrder.splice(tabOrder.indexOf(id), 1);
  }
  tabOrder[tabOrder.length] = id;

  if (
    typeof document.querySelector("iframe.active") !== "undefined" &&
    document.querySelector("iframe.active") !== null
  ) {
    document.querySelector("iframe.active").style.display = "none";
    document.querySelector("iframe.active").classList.remove("active");
  }

  var iframes = document.querySelectorAll("iframe");
  iframes.forEach((elmnt) => {
    elmnt.style.display = "none";
  });
  var iframe = document.getElementById(id);
  iframe.classList.add("active");
  var tabs = document.querySelectorAll(".tab");
  tabs.forEach((elmnt) => (elmnt.className = "tab"));
  var pinnedtabs = document.querySelectorAll(".pinnedtab");
  pinnedtabs.forEach((elmnt) => (elmnt.className = "pinnedtab"));
  if (iframe.src !== "") {
    iframe.style.display = "block";
  }
  var tab = document.getElementById("tab" + id);
  tab.className += " active";
}
function closeTabAndIframe(id) {
  // var tab = document.getElementById("tab" + id);
  // var iframe = document.getElementById(id);
  // tab.outerHTML = "";
  // iframe.outerHTML = "";

  console.log(tabsandiframes.indexOf(id));
  tabsandiframes.splice(tabsandiframes.indexOf(id), 1);

  tabsandiframes = tabsandiframes;

  tabOrder.splice(tabOrder.indexOf(id), 1);
  openTabAndIframe(tabOrder.slice(-1)[0]);
}

HTML部分 #

{#each tabsandiframes as tabandiframe}
  <div
    class="tab"
    id={"tab" + tabandiframe.id}
    on:click={() => openTabAndIframe(tabandiframe.id)}
    on:keypress={void 0}
  >
    <img alt="Tab Icon" src="https://github.com/notAperson535/arc-browser-svelte/blob/master/public/img/tabfavicon.png?raw=true" class="tabfavicon" />
    <p>Tab</p>
    <img
      on:click={() => closeTabAndIframe(tabandiframe.id)}
      on:keydown={void 0}
      alt="Close tab"
      src="https://github.com/notAperson535/arc-browser-svelte/blob/master/public/img/closetab.png?raw=true"
      class="invert tabclose"
      listener="true"
    />
  </div>
{/each}

{#each tabsandiframes as tabandiframe}
  <iframe id={tabandiframe.id} src={tabandiframe.src} title="iframe" />
{/each}

<svelte:window
  on:load={() => newTabAndIframe()}
  on:load={() => openTabAndIframe(4)}
/>

我原本希望移除标签后其内容消失，但实际下方标签会继承被移除标签的内容，比如移除顶部标签，最终却只删除了底部标签。

问题根源与修复方案 #

1. 核心问题：{#each}循环缺少唯一key #

Svelte的{#each}默认用数组索引追踪DOM元素，删除元素时会复用现有节点，导致iframe的src被错误继承。必须给循环添加唯一key，让Svelte准确识别每个元素：

<!-- 标签循环添加key -->
{#each tabsandiframes as tabandiframe (tabandiframe.id)}
  <!-- tab元素 -->
{/each}

<!-- iframe循环添加key -->
{#each tabsandiframes as tabandiframe (tabandiframe.id)}
  <!-- iframe元素 -->
{/each}

2. 数组删除逻辑错误 #

tabsandiframes.indexOf(id)无法找到目标对象（数组元素是对象，不是纯id值），导致splice删除的是索引-1（即最后一个元素），这是“删顶部却删底部”的直接原因。改用findIndex匹配id：

function closeTabAndIframe(id) {
  // 找到对应id的元素索引
  const targetIndex = tabsandiframes.findIndex(item => item.id === id);
  if (targetIndex !== -1) {
    tabsandiframes.splice(targetIndex, 1);
  }

  tabOrder.splice(tabOrder.indexOf(id), 1);
  // 避免tabOrder为空时报错
  if (tabOrder.length > 0) {
    openTabAndIframe(tabOrder.slice(-1)[0]);
  }
}

3. 用响应式状态替代手动DOM操作 #

直接操作DOM和Svelte的响应式机制冲突，改用变量追踪激活状态：

// 新增变量追踪当前激活标签ID
let activeTabId = null;

function openTabAndIframe(id) {
  if (tabOrder.includes(id)) {
    tabOrder.splice(tabOrder.indexOf(id), 1);
  }
  tabOrder.push(id);
  // 直接更新激活状态，Svelte自动同步DOM
  activeTabId = id;
}

然后在HTML中用条件绑定实现样式控制：

{#each tabsandiframes as tabandiframe (tabandiframe.id)}
  <div
    class="tab {activeTabId === tabandiframe.id ? 'active' : ''}"
    id={"tab" + tabandiframe.id}
    on:click={() => openTabAndIframe(tabandiframe.id)}
  >
    <!-- 标签内容 -->
  </div>
{/each}

{#each tabsandiframes as tabandiframe (tabandiframe.id)}
  <iframe 
    id={tabandiframe.id} 
    src={tabandiframe.src} 
    title="iframe"
    class={activeTabId === tabandiframe.id ? 'active' : ''}
    style="display: {activeTabId === tabandiframe.id ? 'block' : 'none'}"
  />
{/each}

4. 修正初始化逻辑 #

避免重复绑定on:load，合并初始化操作：

<svelte:window on:load={() => {
  newTabAndIframe();
  openTabAndIframe(4);
}} />

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