[HowTo] Destroy component declared in #each block

[Neah-Ko]

Hello,

I'm using sveltekit SPA mode, to create a frontend for an already existing backend.

I'm trying to have some components declared in an #each block self destruct when an event handler is finished.

Here's the general logic to keep it simple:

<script lang="ts">
    let actionable_data = $state<Array>();
    onMount(async ()=>{
       let promises = [];
       // Define a list of promises to fetch data for all my actionables
       actionable_data = await Promise.all(promises) // fetch
    })
    function action(e, actionable){
        // doStuff()
        ...
       // on success
       setInterval(() => {
          unmount(actionable.comp, {outro: true}); // destroy after 5s triggering outro transition
      }, 5000)
    }
</script>
...
<div>
  {#if actionable_data?.length}
      {#each actionable_data as one}
          <ActionableComponent
              bind:this={one.comp} // bind component somewhere
              onchange={(e)=>action(e, one)}
          />
      {/each}
  {/if}
</div>
...

However, upon using this svelte 5 approach I get errors telling me that the component is not mounted.

I've browsed few solutions that seems deprecated. (i.e. $destroy)

I've also tried exporting a method from my child component like this:

<!-- ActionableComponent.svelte -->
<script lang="ts">
  ... // props
  let comp;
  export function remove(){
     comp = null; // attempt #1
     comp.parentNode.removeChild(comp); // attempt #2
  }
</script>

<div bind:this={comp} out:fade={{ duration: 5000 }}>
...
</div>

which didn't worked when called from Parent component.

Upon writing this, I desperately tried to mount it just before unmounting it, which also results in an error.

unmount(mount(actionable.comp, parent_component), {outro: true});

Something that works

Ultimately, I can have my child component export a flag, which is tied to a style prop

<!-- ActionableComponent.svelte -->
<script lang="ts">
  ... // props
  let remove = $state<boolean>(false);
  export { remove };
</script>

<div out:fade={{ duration: 5000 }} style={remove ? "display: none;" : "display: block;"}>
...
</div>

which could do. However, it feels quite hacky and I don't get the svelte transition effect out of it. While I'm a it, I can go with a pure CSS route making use of transition.

So my last call is to open a discussion here. Without wanting to complain too much, I'm surprised by how difficult it is to remove a component that is not tied to an {#if} block, which would be a little unsound in my case of an arbitrarily long list of data fetched from the server.

Is there a right way to do this ?

Best,

[adiguba]

Hello,

You don't have to create/destroy component nor to manipulate the DOM.
=> You just have to handle the data.

You use a {#each} to display component, so for destroying a component you just have to remove the data from the array.

Exemple here :

https://svelte.dev/playground/hello-world?version=5.22.1#H4sIAAAAAAAACn1UbWvbMBD-Kzd3UBuyOFlbGK4dKPuyfRgMtg-DugzFOqeitmQkuU0w_u87yc5L3XQEx-b06Lm75166QLIagyT4hlWl4EXpikOIXFjkUTALSlGhCZL7LrC7xuGcgezjrbummZtnrKyzrZnBc_ZCSYvSEk2QmkKLxkLF5CbLA2vyYJXL3Iq6UdpCB0r-UK200EOpVQ2XA8nl7QnorrBCSbau8KsiiyTqETyPz5zNTyncU6EFdsD95cwyyOCjscxieqc1263CyKPHYEJmdrKAMMpWnSexEMdQsieESjEu5AZGM3thwoLEF_hJAQmDoYZsBQbtb1Gjam2oZ7BcLBbR4GAIKD8Xz_147kQRPIHlDNxJAnng3otlHkA_m4A-T0Cfz4GuJqCrc6DrCej6HOhmAro5AcGDe_fRQfaylT7JMdcQZydZR92empTl6pdtyzKMyOatrmKCb0mViU7zUkj-XXLchswJzeaCQ5ad4siy11qUEDqaDwT4tIzg1KfGWj0jYIX1oZ-Y64U9ZurZNJUo0PFRRfce-mN7UKKmLQo05lhoOk7jYQJc18uUi2f6AOgukBWPb7qAGaJBCOnPpTGyp-cGwOGzzgHdV0_3ikeaMcy6EKlvj5oTJOoh9lPXJVgZHGml8iQ-nNiF46N1EdIIW9zaILG6xX723ip4d_Qmq-F_uLer4vV6MJXgOFkOsdVMGuFYhyF37dL5ZGYHHegOzXijVWP8cL-pAxxZEu_FO07XraU14Gio3E9O4YGvX_1J4-FwkNLLvlfMkxq7qwYWRz8221ppjprGudmCUeQHLoqiGNtnzYqnjaaVQ7N1US7dbzxpGHd7hu5hPZpqpjdCJvCl2d4em8v7fF2wh_4fT5zkUuUFAAA=

Some remarks :

• You have to use an unique ID for a keyed-each block, in order to preserver the order of the elements.
• Note also that you can use {#each} on an empty or null array, and you can even use an {:else} in this case.

[Neah-Ko]

That worked seamlessly, thanks a lot !!

Still new to svelte and getting adjusted to its logic.