javascript - Jquery .clone() 方法。删除克隆

Question

在处理 .clone() 函数时，我注意到一些有趣的行为。

如果我有一个函数可以像这样动态创建行和列:

function appendDiv(n) {
    for (var i=0;i<n;i++) {
        $rows.append($columns.clone()); //assume I put $('.rows') & others in a var
    }
    for (var i=0;i<n;i++) {
        $wrapper.append($rows.clone());
    }
}

然后我从 DOM 中删除元素，可能像这样:

    function deleteClones() {
    $wrapper.off();
    $wrapper.html('');
    $('body').append($wrapper);
    num = prompt("Enter another number.");
    return num;
}

所以我会按如下顺序调用函数:

appendDiv(num);
num = deleteClones();
appendDiv(num);

有人可以告诉我为什么当我删除这些元素后再次调用 appendDiv(num); 时，旧列会与新列一起添加吗？这是我的意思的学前水平演示:http://jsfiddle.net/wj6sgeeu/ 。请注意，在检查 html 文档时，当我们第二次调用 appendDiv(num) 时，会再次添加在调用 deleteClones() 之前创建的克隆。

我是 jquery 新手，所以也许这是一个不言而喻的事实(也许使用不同的方法来删除克隆？)但是有人对这种行为有解释吗？

谢谢!

Answer 1

您需要从该行中删除之前添加的列，否则您只是不断向现有列添加更多列

function appendDiv(n) {
    $rows.empty();
    for (var i = 0; i < n; i++) {
        $rows.append($columns.clone());
        console.log('ok');
    }
    for (var i = 0; i < n; i++) {
        $wrapper.append($rows.clone());
        console.log('ok2');
    }
}

演示:Fiddle