let dropdownStatus = false
function deletedata() {
  alldata = [
      { name: 'a', value: '1' },
      { name: 'b', value: '2' }
  ];
}

// more code
{#if dropdownStatus}
<DotsHorizontalOutline class="dark:text-white" />
  <Dropdown>
    <DropdownItem
       on:click={() => {
       deletedata();
      }}>delete</DropdownItem
  >
 </Dropdown>
{/if)

<script>
	import {
		Table,
		TableBody,
		TableBodyCell,
		TableBodyRow,
		TableHead,
		TableHeadCell,
		Button,
		Dropdown,
		DropdownItem,
		ToolbarButton,
		DropdownDivider
	} from 'flowbite-svelte';
	import { DotsHorizontalOutline, DotsVerticalOutline } from 'flowbite-svelte-icons';
	let dropdownStatus = true;
	let alldata = [
		{ name: 'a', value: '1' },
		{ name: 'b', value: '2' },
		{ name: 'c', value: '3' }
	];
	function deletedata() {
		dropdownStatus = false;
                // Logic to remove when pretending here
		alldata = [
			{ name: 'a', value: '1' },
			{ name: 'b', value: '2' }
		];
		dropdownStatus = true;
	}
</script>

<Table>
	<TableHead>
		<TableHeadCell>name</TableHeadCell>
		<TableHeadCell>value</TableHeadCell>
		<TableHeadCell>edit</TableHeadCell>
	</TableHead>
	<TableBody tableBodyClass="divide-y">
		{#each alldata as d}
			<TableBodyRow>
				<TableBodyCell>{d.name}</TableBodyCell>
				<TableBodyCell>{d.value}</TableBodyCell>
				<TableBodyCell>
					{#if dropdownStatus}
						<DotsHorizontalOutline class="dark:text-white" />
						<Dropdown>
							<DropdownItem
								on:click={() => {
									deletedata();
								}}>delete</DropdownItem
							>
						</Dropdown>
					{/if}
				</TableBodyCell>
			</TableBodyRow>
		{/each}
	</TableBody>
</Table>