Javascript Can'；不要在克隆的元素上删除任何元素

我试图创建一个像WordPress那样的菜单生成器，其中每个菜单项（

元素）都是可排序和可拖放的，这样用户就可以将任何菜单项拖放到任何其他菜单项上，并构建任何深度的嵌套菜单。 我可以拖放克隆的菜单项，但我的问题是我无法在克隆的元素上拖放任何元素

$（文档）.ready（函数（）{
$（“.main menu、.sub-menu-1、.sub-menu-2”）。可排序（{
连接方式：'.menu group'，
占位符：“放置占位符”
}).disableSelection（）；
//下面的HTML出现了问题。我克隆了`
`
//元素，我将其附加到一个`
`元素，其中所有`
`
//元素是可排序和可删除的。但是我无法删除
//克隆元素上的任何元素。
$（'.btn添加菜单项'）。单击（函数（e）{
e、 预防默认值（）；
$（“.menu复选框”）.each（函数（）{
如果（$（this）.is（':checked'））{
$（this）.parents（'li'）.addClass（'ui-sortable-handle'）；
$（this）.next（'ul'）.addClass（'sub-menu-1菜单组ui sortable'）；
$（this）.parents（'li'）.clone（true）.appendTo（'.main menu'）；
}
});
});
});
。放置占位符{
边框：1px绿色虚线；
}
.菜单组{
填充：8px；
}



新菜单项1




新菜单项2




添加菜单


主菜单1


子菜单1






主菜单2


子菜单2





添加可排序类不会使其可排序，克隆后需要对其调用
.sortable（）
。大概是这样的：


$（文档）.ready（函数（）{
$（“.main menu、.sub-menu-1、.sub-menu-2”）。可排序（{
连接方式：'.menu group'，
占位符：“放置占位符”
}).disableSelection（）；
//下面的HTML出现了问题。我克隆了`
`
//元素，我将其附加到一个`
`元素，其中所有`
`
//元素是可排序和可删除的。但是我无法删除
//克隆元素上的任何元素。
$（'.btn添加菜单项'）。单击（函数（e）{
e、 预防默认值（）；
$（“.menu复选框”）.each（函数（）{
如果（$（this）.is（':checked'））{
$（this）.next（'ul'）.addClass（'sub-menu-1菜单组'）；
$（this）.parents（'li'）.clone（true）.appendTo（'.main menu'）.sortable（{connectWith:'.menu-group'，占位符：'drop placeholder'}）。find（'.sub-menu-1，.sub-menu-2'）。sortable（{connectWith:'.menu-group'，占位符：'drop placeholder'}）；
}
});
});
});
。放置占位符{
边框：1px绿色虚线；
}
.菜单组{
填充：8px；
}



新菜单项1




新菜单项2




添加菜单


主菜单1


子菜单1






主菜单2


子菜单2





如果您可以使用堆栈片段或JSFIDLE创建您所面临问题的演示，将很容易为您提供帮助。@Manish我已经添加了工作片段nowFlash，您已经解决了我的问题，但我发现了与您的解决方案有关的新问题：一旦在克隆的元素上删除了一个元素，该元素现在无法放到除克隆元素之外的任何其他元素上修复，请立即重试。