javascript - 需要像 jquery empty() 这样的函数来删除 jquery 添加的元素

Question

我有一个名为“content”的空白 div。随后使用 jquery 附加将链接添加到“内容”。使用empty()不起作用；我猜empty()不会清除jquery添加的链接，因为链接没有添加到DOM中？

函数应该清除，然后显示新链接，但它不会清除链接，只是附加到存在的内容。

    function getSubRedditLinks(url)
{  
   $("#content").empty(); //doesnt work

   $.getJSON(
      url + suffix, 
      function foo(data) 
      { 
         $("#content").empty(); //doesnt work
         $.each(
            data.data.children, 
            function (i, post) 
            {
               $("#content").append(  '<section>' + 
                                    '<a href="#">' + post.data.title + '</a>' + 
                                    '</section>' );
            } 
         );
      } 
   );
   $("#content").empty(); //doesnt work
}

函数的调用方式如下:

<li><a class="link" href="#" onclick=getLinks("localhost")>Blogroll</a></li>

显然，empty() 应该可以工作。我简化了上面的代码，把它放在我放置的 3 个地方不起作用。它只是不断添加指向 #content 的链接

Answer 1

试试这个:

function getLinks(url)
{
   $.getJSON(
      url + suffix, 
      function(data) 
      { 
         var items = [];
         $.each(
            data.data.children, 
            function (i, post) 
            {
                var section = $('<section></section>').append('<a></a>');
                section.find('a').attr('href', '#post=post-' + i).text(post.data.title);
                items.push(section[0].outerHTML);
            } 
         );
         $('#content').empty().append(items.join(''));
      });
}