remove() or replaceWith() leaves line where link used to be?

remove() or replaceWith() leaves line where link used to be?

Hey Board,

I'm trying to display a list of links 10 at a time with the last link being used to show that there are more links available. After clicking this link I'm trying to remove or replace the last link that says "More..." with the next set of 10 links. The problem I'm having is there's a blank line where the "More..." once was. This happens when I do either remove() or replaceWith(). Is there a way to get rid of the line? When I put the code in jsfiddle the blank line doesn't show up, however in the browser (I've tried them all) it does?

Here's the code causing the issue,

$("#myAnchor").click(function (e) {
    e.preventDefault();
         
    $("#myAnchor").replaceWith(function() {
        for (var i = 9; i < 20; i++) {
            $('#citations').append('<li><a href="' + link + '">' + json[i].title + '</a></li>');
        }

    });
});

and here's all the code,

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script >
    $(document).ready(function($) {
     // First link out of three
     var url = 'https://www.sciencebase.gov/catalog/items?parentId=504108e5e4b07a90c5ec62d4&max=60
offset=0&format=jsonp';
 
    $.ajax({
        type: 'GET',
        url: url,
        jsonpCallback: 'getSBJSON',
        contentType: "application/json",
        dataType: 'jsonp',
        success: function(json) {

                           for (var i = 0; i < json.items.length; i++) {
                               var urlId = json.items[i].id;
                           }

                           var linkBase = "http://www.sciencebase.gov/catalog/item/";
                           var link = "";
                          $.each(json.items, function(i,item){
                              link = linkBase + this.id
                              $('#sbItems').append('<li><b><a href="' + link + '">' + this.title + '</a> - </b>' + this.summary + '</li>');        
                          });

                          // devHack, loop being used to extract the exact id to use in url of next ajax request
                         for (var i = 23; i < 24; i++) {
                             var urlId = json.items[i].id;
                         }

                         var itemLnkId =  urlId;

                     $.ajax({
                         type: 'GET',
                         url: 'https://www.sciencebase.gov/catalog/itemLink/' + itemLnkId + '?format=jsonp',
                         jsonpCallback: 'getSBJSON',
                         contentType: "application/json",
                         dataType: 'jsonp',
                         success: function(json) {
                                      //alert(json[i].title);
                                      // devHack, setup for all links
                                      var linkBase = "http://www.sciencebase.gov/catalog/item/";
                                     
                                      // devHack, will be used along with linkbase to get to a specific link
                                      var link = "";
                                     
                                      $('#sbItems a').bind('click', function (e) {
                                          e.preventDefault();
                                          //var out = [];
                                          for (var i = 0; i < 9; i++) {
                                              $('#citations').append('<li><a href="' + link + '">' + json[i].title + '</a></li>');
                                          }
                                          $('#citations').append('<li><a href="" id="myAnchor">More...</a></li>');
                                          //$('ul').append(out.join('')).append('<li><a href="' + link + '">' + json[i].title + '</a></li>');

                                         
                                          $("#myAnchor").click(function (e) {
                                              e.preventDefault();
         
                                              $("#myAnchor").replaceWith(function() {
                                                  for (var i = 9; i < 20; i++) {
                                                      $('#citations').append('<li><a href="' + link + '">' + json[i].title + '</a></li>');
                                                  }

                                              });
                                                 
                                          });

                                      });
 
                         },
                         error: function(e) {
                             console.log(e.message);
                         }
                     });    
     
        },
        error: function(e) {
            console.log(e.message);
        }
    });
});
</script>
</head>
<body>
<p><em>This is a simple example of a basic HTML page that uses JQuery to call items from ScienceBase in JSON format and output them on the page. It serves to show how a basic web application can interact with dynamic ScienceBase services. The code points out the one critical feature of such an application, the use of a callback method in the Javascript to allow web pages on one domain to call and render JSON from another domain (www.sciencebase.gov). The listing below comes from a query for items under a particular ScienceBase parent item - a set of project records from the USGS National Research Program. The listing shows title with a link to the full project record in ScienceBase and summary (first part of a full abstract). View source for code examples and inline comments.</em></p>

<h2>Projects of the USGS Water National Research Program</h2>

<div class='wrapper'>
    <ul id='sbItems'></ul>
</div>

<h3>Citations</h3>

<div class='wrapper'> 
    <ul id='citations'></ul>   
</div>

</body>
</html>

Also, if there any suggestions on a better way that helps too!!
Thanks