feat(Career): implement delete button

app/src/career/components/RoleNode.tsx

@@ -7,12 +7,14 @@ import {
   NodeResizer,
   NodeToolbar,
   Position,
+  useNodeId,
+  useReactFlow,
   type Node,
   type NodeProps,
 } from "@xyflow/react";
 import clsx from "clsx";
 import Image from "next/image";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { FaTrash } from "react-icons/fa6";
 import { IoMdResize } from "react-icons/io";
 
@@ -27,8 +29,15 @@ export type RoleNode = Node<
 >;
 
 export const RoleNode = (props: NodeProps<RoleNode>) => {
+  const nodeId = useNodeId();
+  const { setNodes, setEdges } = useReactFlow();
   const [isResizing, setIsResizing] = useState(true);
 
+  const onDelete = useCallback(() => {
+    setNodes((nodes) => nodes.filter((node) => node.id !== nodeId));
+    setEdges((edges) => edges.filter((edge) => edge.source !== nodeId));
+  }, [nodeId, setNodes, setEdges]);
+
   return (
     <>
       <NodeToolbar
@@ -39,13 +48,16 @@ export const RoleNode = (props: NodeProps<RoleNode>) => {
       >
         <button
           title="Größe ändern"
+          type="button"
           onClick={() => setIsResizing((value) => !value)}
           className="bg-neutral-800 rounded p-2 text-sinister-red-500 hover:bg-neutral-700"
         >
           <IoMdResize />
         </button>
 
         <button
+          onClick={onDelete}
+          type="button"
           title="Löschen"
           className="bg-neutral-800 rounded p-2 text-sinister-red-500 hover:bg-neutral-700"
         >