JsTree delete won't work

I simply want to delete a node from my jstree but so far no luck. HTML:

<!doctype html>
<html>
    <head>
        <title> </title>

         <!-- scripts -->
        <script src="../js/jquery-2.1.4.js"></script>
        <script src="../js_tree/dist/jstree.js"></script>
        <script src="../js/tree.js"></script>

        <!-- Styles -->
        <link rel='stylesheet' href="../css/main.css">
        <link rel="stylesheet" href="../css/bootstrap.min.css">
        <link rel="stylesheet" href="../css/font-awesome.min.css">
        <link rel="stylesheet" href="../js_tree/dist/themes/default/style.min.css">
        <!-- <link rel="icon" href="images/favicon.ico"> -->

        <!-- Metadata -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">
    </head>

    <body>
            <button onclick="deletor();">delete</button>
            <div id="tree">

            <!--  LOADS JSON DATA-->

            </div>
    </body>

</html>

The javascript: (I tried 2 ways: in the context menu and through the function deletor). I don't get any errors, it just doesn't do anything. $(document).ready(function(){ adjustModal();

  $('#tree').jstree({
    'core' : {
      'data' : [
        { "text" : "Root node", "children" : [
            { "text" : "Child node 1" },
            { "text" : "Child node 2" }
        ]}
      ]
    },
    "search" : {
      "case_insensitive" : true
    },
    "plugins": ["contextmenu", "dnd", "search", "wholerow"],
    "contextmenu" : {
      "items": customMenu
    }
  });

  $('#tree').on("changed.jstree", function (e, data) {
    console.log(data.node)
    console.log(data.node.text);
  });

});

function deletor(){
  // alert("hey");
  var ref = $('#tree').jstree(true),
    sel = ref.get_selected();
  if(!sel.length) { return false; }
  ref.delete_node(sel);
}

function customMenu(node) {
    // The default set of all items
    var tree = $('#tree');
    var items = {
        addItem: {
          label: "Add Item",
          action: function () {
            console.log("rename");
          }
        },
        renameItem: { // The "rename" menu item
            label: "Rename",
            action: function () {
              console.log("Rename");
            }
        },
        deleteItem: { // The "delete" menu item
            label: "Delete",
            action: function () {
              var ref = $('#tree').jstree(true),
                                sel = ref.get_selected();
                            if(!sel.length) { return false; }
                            ref.delete_node(sel);
            }
        }
    };

    if ($(node).hasClass("folder")) {
        // Delete the "delete" menu item
        delete items.deleteItem;
    }

    return items;
}

Can you guys tell me what I'm doing wrong?

Solution

Ok, so I figured it out. In your tree core section you have to allow the user to modify the tree. Changed the js to this: check_callback section

$('#tree').jstree({
    'core' : {
    'check_callback' : function (operation, node, node_parent, node_position, more) {
          // operation can be 'create_node', 'rename_node', 'delete_node', 'move_node' or 'copy_node'
          // in case of 'rename_node' node_position is filled with the new node name
          return operation === 'delete_node' ? true : false;
      },
      'data' : [
        { "text" : "Root node", "children" : [
            { "text" : "Child node 1" },
            { "text" : "Child node 2" }
        ]}
      ]
    },
    "search" : {
      "case_insensitive" : true
    },
    "plugins": ["contextmenu", "dnd", "search", "wholerow"],
    "contextmenu" : {
      "items": customMenu
    }
  });

or simply if you want to allow all actions on the tree:

'check_callback': true,