ul list .remove（）之后的jQuery将不再填充列表

Question

加载页面时，有3个列表。首先包含一个活动列表，第二个和第三个是空白的。当单击活动列表li时，第二个列表（ul）将填充一个li元素，填充过程将自动继续到第三个列表（单击鼠标）。然后当按下按钮删除时，两个列表都被删除，并且该过程应该与所描述的相同，但由于某种原因第二个列表没有被填充，一切都进入第三个列表。

我尝试过方法：remove（），empty（），detach（）但它们似乎都不起作用。同样在if语句中我试图检查if (typeof ul.lenght === "undefined")，但即使这不起作用。

另外在console.log()中提及ul.lenght属性时第一次返回0并且未定义并填充第二个列表但是在按下删除按钮后它返回相同的值但不会填充列表。

这是代码：

function myf() {
    var orig = $("#ori li").length;
    if ($("#ori li").length === 0 || typeof orig === "undefined") {
        $(document).on('click', '#orglis li', function() {
            $(this).remove();
            $("#ori").append(this);
        });
    } else {
        $(document).on('click', '#orglis li', function() {
            $(this).remove();
            $("#zam").append(this);
            var lio = document.getElementById("ori").getElementsByTagName("li");
            var larr = lio[0].innerText;
            var arr = Array.from(document.querySelectorAll('#c>ul>li'), li => (li.textContent));
            var tekst = "";
            var i;
            var j;
            for (j = 0; j < arr.length; j++) {
                arr[j] = arr[j].trim();
            }
            for (i = arr.length - 1; i >= 0; i--) {
                tekst += larr + ", " + arr[i] + '\n';
            }

            document.getElementById("tare").innerHTML = tekst;
            document.getElementById("imep").value = larr;
        });
    }
}

Here你可以看到演示。

编辑：还尝试使用outerHTML来设置ul，但仍然无法正常工作

Answer 1

@ freedomn-m关于混合onclick=和$(document).on("click"是对的，我注意到我没有理由有两个相同的功能