How do I keep the red divs from building up (one under another) with each onclick event? I tested variations of removeChild(div) without success. Is removeChild(div) part of the answer and I'm just using it wrong or is there a better approach?
HTML Code:
<script type="text/javascript">
function showHint(str) {
  if (str.length==0) {
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    } else {
   	  // code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
	  var div = document.createElement('div');
      div.setAttribute('id', 'link_container');
      // = 'red'; = '300px'; = '100px'; = '-15px 0px 0px 75px';
      var txt=xmlhttp.responseText;
      var strA = txt.slice(0,txt.indexOf(",")); //define number of cycles of For Loop 
      var str = txt.substr(txt.indexOf(",")+1);  //cut 1st position from string and save remaining info
      for (i=0; i<=strA; i++){
        var newLink = document.createElement('a'); //create anchor
        var linkName = str.slice(0,str.indexOf(" ,")+1);
        var linkName = linkName.split(' ').join(''); 
        newLink.href = "http://localhost/" + linkName+".php";
        newLink.innerHTML = linkName;
	var str = str.substr(str.indexOf(",")+1);
	var newBr = document.createElement('br'); //create break
  <p><b>Start typing a name in the input field below:</b></p>
    First name: <input type="text" onkeyup="showHint(this.value)" size="20" />