De hecho, acabo de resolver esto yo mismo usando los controles React Flow con un botón de eliminación personalizado. En el componente <ReactFlow> agregué el accesorio onElementClick que usa un gancho React para almacenar el estado del elemento seleccionado. En el onClick para el botón, tengo otro enlace que obtiene el elemento seleccionado del estado, todos los bordes del árbol y llama a getConnectedEdges() , que devolverá todos los bordes conectados al elemento seleccionado. Luego simplemente pase una matriz con el elemento seleccionado y los bordes conectados a su onElementsRemove() .

Aquí está la documentación para onElementClick . https://reactflow.dev/docs/api/component-props/

 <ReactFlow className={flowStyles} elements={elements} onElementClick={onClickElement} > <Controls showInteractive={false}> <ControlButton onClick={onClickElementDelete}> <DeleteIcon /> </ControlButton> </Controls> </ReactFlow>

 const onClickElement = useCallback((event: ReactMouseEvent, element: Node | Edge) => { // Set the clicked element in local state setState({ clickedElement: [element] }) }, [])

Aquí está la documentación para getConnectedEdges . https://reactflow.dev/docs/api/helper-functions/

 const onClickElementDelete = useCallback(() => { // Get all edges for the flow const edges = elements.filter((element: Node | Edge) => isEdge(element)) // Get edges connected to selected node const edgesToRemove = getConnectedEdges(state.clickedElement, edges) onElementsRemove([...state.clickedElement, ...edgesToRemove]) } }, [elements, onElementsRemove, state.clickedElement])

Debe agregar la función de eliminación en la propiedad de datos de su nodo personalizado, y al hacer clic en el botón Eliminar de su nodo personalizado, debe llamar a esa función

Al crear un nodo personalizado =>

 const newNode = { id: nodeID, type, position, data: { onDelete : yourFunctionToDelete }}

Código de nodo personalizado en el botón Eliminar => onClick={props.data.onDelete}