JQuery empty（）方法如何工作？

Question

我知道empty方法会删除DOM元素中的所有子元素。

但是，在此示例中，为什么删除空方法会导致重复的条目：

并将其放入正常页面的结果中：

var renderNotesList = function() 
{
    var dummyNotesCount = 10, note, i;

    var view = $(notesListSelector);
    view.empty();

    var ul = $("<ul id =\"notes-list\" data-role=\"listview\"></ul>").appendTo(view);

    for (i=0; i<dummyNotesCount; i++) 
    {
        $("<li>"+ "<a href=\"index.html#note-editor-page?noteId=" + i + "\">" + "<div>Note title " + i + "</div>" + "<div class=\"list-item-narrative\">Note Narrative " + i + "</div>" + "</a>" + "</li>").appendTo(ul);
    }
    ul.listview();
};

Answer 1

我不知道empty()为什么不起作用，但我发现了这个

  

...所以在这个排序之前，每个人都应该使用：    el.children（）。remove（）; 而不是 el.empty（）;

（jQuery.empty() does not destroy UI widgets, whereas jQuery.remove() does (using UI 1.8.4)）

Answer 2

如果没有看到您的JavaScript在页面中的使用情况，我怀疑您必须两次调用renderNotesList()函数，从而生成无序列表。

使用.empty()方法时，您将删除第一个ul列表，因此您只能看到一个实例。如果没有.empty()的电话，则同时保留两者。

但是，我不能在没有看到更多信息的情况下说明您网页中的这种情况发生在何处或如何发生，但至少您现在已经了解了要查找的内容。

演示小提琴

我使用你的JavaScript构建了一个演示，但我猜测你是如何使用它的。

小提琴：http://jsfiddle.net/audetwebdesign/UVymE/

<强>脚注

我发现函数ul.listview()实际上可能会将ul的第二个副本附加到DOM。您需要检查代码或发布以供进一步审核。