Javascript JQuery/HTML5：组织结构图，如何使用此插件正确删除节点？

我想做一个组织结构图，但我有一些问题。。。 我使用JorgChart插件（）

这就是问题所在：

• 我成功地执行了双击事件来更改节点的名称并正确地插入这个插件

• 我设法使用个性化上下文菜单添加/删除节点

• 当我删除一个节点（而不是一片叶子）时，没有问题，该节点变灰并丢失其名称；但当我想删除一片叶子时，“节点”会消失，但“黑线”会保留

我不知道我怎样才能让这些线同时消失

这是delete函数的外观：

    /* line 346 */ 
    function removeNode() {


        /* The node is desactivated, we put it in grey. */
        lastClicked.addClass("nodeDeleted");

        var $tr = lastClicked.closest('tr');

        if(!lastClicked.hasClass("expanded")) {

            $tr.html(" ");

            /* We do the difference between the fact that the node disappared*/
            console.log("We removed for real the node: "+lastClicked.html().trim().substring(0,14));

        } else {

            /* And the fact that we just put the none in grey. */
            console.log("We desactived the node: "+lastClicked.html().trim().substring(0,14));
        }

        /* We erase the name of the node. */
        lastClicked.html("");
    }

它已经在IE11、Chrome和Firefox上测试过，但在Safari上可能会有一些问题

JSFiddle：

目前的结果是：

事先非常感谢， 干杯

瓦伦丁

我首先查看了您使用的插件生成的结构，例如boss3：

<td colspan="2" class="node-container">
    <table border="0" cellpadding="0" cellspacing="0">
        <tbody>
            <tr class="node-cells">
                <td colspan="4" class="node-cell">
                    <div style="cursor: pointer;" class="node expanded">Boss 3</div>
                </td>
            </tr>
            <tr>
                <td colspan="4">
                    <div class="line down"></div>
                </td>
            </tr>
            <tr>
                <td class="line left"></td>
                <td class="line right top"></td>
                <td class="line left top"></td>
                <td class="line right"></td>
            </tr>
            <tr>
                <td colspan="2" class="node-container">
                    <table border="0" cellpadding="0" cellspacing="0">
                        <tbody>
                            <tr class="node-cells">
                                <td colspan="2" class="node-cell">
                                    <div style="cursor: pointer;" class="node expanded">Richard</div>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <div class="line down"></div>
                                </td>
                            </tr>
                            <tr>
                                <td class="line left"></td>
                                <td class="line right"></td>
                            </tr>
                            <tr>
                                <td colspan="2" class="node-container">
                                    <table border="0" cellpadding="0" cellspacing="0">
                                        <tbody>
                                            <tr class="node-cells">
                                                <td colspan="2" class="node-cell">
                                                    <div class="node">Bizut</div>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            <td colspan="2" class="node-container">
                <table border="0" cellpadding="0" cellspacing="0">
                    <tbody>
                            <tr class="node-cells">
                                <td colspan="2" class="node-cell">
                                    <div class="node">Nicolas</div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</td>

这是小提琴的最新版本：

---

上次编辑处理一个项目的删除，该项目在第一次删除时不是叶子，但在下一次尝试时是叶子？这是一个团队的html，团队的成员和菜单：voir（mais il me manque ton script organization.js，a moins que cela soit ce que Tu as copiédans le bloc js aussi？organization.js est copiécollédans le bloc js et le main.css dans le bloc css:）但是，这是修改后的视觉效果的一部分：）好的，只是在html中的一部分，这是一个错误。JE关心Pr.Tun-Posil to SupsithSuthJeaTr.Tr.Sr.R: QueVux TuePr.C.E.仅仅是因为你是一个凡人，你是在吹捧一个案件和一个协议的不同吗？你是在说什么？你做得再好不过了！非常感谢：）这正是我想要的。现在我只需要把递归性放进去（因为你知道，一个没有子节点的节点变成了一个叶子，所以应该可以真正删除它，而不仅仅是放进灰色：），但我会管理这部分；）再次感谢！这将非常简单：我认为在删除没有兄弟项的项时，您只需将

扩展的

类删除到父节点（因此它将位于函数的第一个

else

部分）。好的，我成功删除了“before node and then leaf”，但再次，黑线也有同样的问题：P我没有成功地通过您的方法删除第一个中的“扩展”类…：/我们可以在那里讨论：

function removeNode() {
    var parentContainer = lastClicked.closest('.node-container');
    var containerLowerLinesRow = parentContainer.parent().prev('tr');
    var containerUpperLineRow = containerLowerLinesRow.prev('tr');
    /* If item is a leaf, remove it and the lines */
    if (!lastClicked.hasClass("expanded")) {
        // Handle the lines going to the deleted item
        if (parentContainer.siblings().length > 0) {                
            // More than one remaining node at the same level: drop a "right top" and a "left top" line
            containerLowerLinesRow.children('.line.left.top:first').remove();
            containerLowerLinesRow.children('.line.right.top:first').remove();
            // Remove the selected item (from the node container)
            parentContainer.remove();
        } else {
            containerUpperLineRow.prev('tr').find('.expanded').removeClass('expanded');
            containerLowerLinesRow.remove();
            containerUpperLineRow.remove();
            // Remove the selected item (from the node container)
            parentContainer.remove();
            console.log("The node that we want to delete has no siblings");
        }
        console.log("We removed for real the node: " + lastClicked.html().trim().substring(0, 14));
    } else {
        /* If item is not a leaf, the node is desactivated, we put it in grey. */
        console.log("We desactived the node: " + lastClicked.html().trim().substring(0, 14));
        lastClicked.addClass("nodeDeleted").html(""); // And we erase the name of the node.
    }
}