how to delete a node using by id (unique)

[bci24]

I am using this in combination with a vue-select - multiple in vue 3.

When I select a user from the list it will push to treeData the object. Ex:

{id:2, text: 'user 2'}

When remove an element from select I can get the object.

The issue that I have is I don't know how to use that function removenodebypath in composition api.

https://he-tree-vue.phphe.com/api.html#removenodebypath

It is possible to remove a node by id (which is unique) - (ex click of a button) and when the node is removed

[{id:1, text: 'user 1'}, {id:2, text: 'user 2'} {id: 3, text: 'user 3', children: [{id: 4, text: 'user 4'}, {id: 5, text: 'user 5'}]}]

(for ex id 3 - according to the treeData from above and it will also remove automatically id 4 and id 5) - and get those id's (all the id's that where removed) ?

Can you show me please how can I use removenodebypath and return the ids from the nodes that where removed ?

[phphe]

the path of id 3 is [2].

// get removed id's
console.log(tree.getAllNodesByPath([2]))
// remove
tree.removeNodeByPath([2])

[bci24]

How to define the tree ? How can get tree in setup ???

<template>
   <Tree :value="treeData"></Tree>
   <button type="button" @click="removeNode">Remove</button>
</template>

<script>
import {Tree,  Fold, Draggable} from 'he-tree-vue'
import 'he-tree-vue/dist/he-tree-vue.css'
export default {
        name: "Nestable",
        components: {Tree: Tree.mixPlugins([Draggable, Fold])},
        setup() {
            const treeData = ref([{id:1, text: 'user 1'}, {id:2, text: 'user 2'} {id: 3, text: 'user 3', children: [{id: 4, text: 'user 4'}, {id: 5, text: 'user 5'}]}])
            const removeNode = (id) => {
                console.log(tree.getAllNodesByPath([2])) // <== ??? tree
            }
            
            return { treeData, removeNode} 
        }
}

[phphe]

<Tree :value="treeData" ref="tree"></Tree>

tree is a ref. check vue doc to get ref.

[bci24]

Sorry forgot about ref :-)

Here is the code

https://codesandbox.io/s/gracious-thompson-u61v6?file=/src/App.vue

When click to remove removeNodeByPath([3]) it will search for index in the object not the id

I want to remove by the id

So in this case id 3

{
        id: 3,
        text: "user 3",
        children: [
          { id: 4, text: "user 4" },
          { id: 5, text: "user 5" },
        ],
      },

should remove the object with all the childrens (id 4, and id 5).

And like I said .... need to know the ids (not index of the object) that he removed (in this case 3,4,5) to sync the other component.

How can I do that ?

[phphe]

function getNodeInfoByID(id) {
  let found
  tree.walkTreeData((node, index, parent, path) => {
    if (node.id === id) {
      found = {node, index, parent, path}
      return false
    }
  })
  return found
}

[bci24]

Still not working what I am trying to do.

I have updated the sandbox

https://codesandbox.io/s/gracious-thompson-u61v6?file=/src/App.vue

what works:

1. Selecting user and add the tree
2. drag the user from tree under another user
3. deselect the user and it removes the user from tree (but only if it s root)

not working:

1. deselecting the user that is under another user will not be removed
2. get all the ids for the childrens when removing a parent node

[phphe]

remove the square brackets of node.path

const removeNode = (id) => {
      let node = getNodeInfoByID(id);
      console.log(node, id);
      if (node) {
        // get removed id's from the three
        console.log(tree.value.getAllNodesByPath(node.path));

        // remove all the data
        tree.value.removeNodeByPath(node.path);

        // remove all ids from selectedUsers model also
      }
    };

[bci24]

I have updated the code. I added some extra code and now works 👍

Thank you!